CODEWITHSUNDEEP
javascripthtml
Fusca
Fusca

Reputation: 15

Error when trying to delete a table row (javascript)

I'm giving the following error when trying to delete a table row: "Uncaught ReferenceError: remTable is not defined index.html:1:1", when I click on index.html to see where is the problem I have it:

remTable(this)

my code:

const transactions = {
    addTable(){
        sModal.classList.remove();

        let table = document.getElementById("data-table");
        let len = table.rows.length;
        let input = document.querySelectorAll("form input");

        //inserting new row
        let line = table.insertRow(len);
        
        //inserting cells
        let info = new Array(5);
        info[0] = line.insertCell(0);
        info[1] = line.insertCell(1);
        info[2] = line.insertCell(2);
        info[3] = line.insertCell(3);
        info[4] = line.insertCell(4);

        // n
        info[0].innerHTML = len;
        info[1].innerHTML = input[0].value;
        info[2].innerHTML = input[1].value;
        info[3].innerHTML = input[2].value;
        info[4].innerHTML = `
            <img src="assets/minus.svg" onclick="remTable(this)">
        `;
    },
    remTable(r){
        var i = r.parentNode.parentNode.rowIndex;
        document.getElementById("data-table").deleteRow(i);
    }
};


    <tr>
        <th>Exemplo</th>
        <th>Exemplo</th>
        <th>Exemplo</th>
        <th>Exemplo</th>
        <th>
            <img src="assets/minus.svg" onclick="remTable(this)">
        </th>
   </tr>

Upvotes: 0

Views: 210

Answers (2)

Mister Jojo
Mister Jojo

Reputation: 22265

the code you show is far too succinct for anyone to know where your problem is.

If that can help you here is the way I use

const myForm    = document.forms['my-form']
const tableBody = document.querySelector('table#data-table tbody')

myForm.onsubmit = e =>
  {
  e.preventDefault()
  let len  = tableBody.rows.length
    , line = tableBody.insertRow()
    ;
  line.insertCell().textContent = len
  line.insertCell().textContent = myForm.inoX1.value
  line.insertCell().textContent = myForm.inoX2.value
  line.insertCell().textContent = myForm.inoX3.value
  line.insertCell().innerHTML = `<img class="removLine" src="assets/minus.svg">`

  myForm.reset()        
  }

tableBody.onclick = ({target}) =>
  {
  if (!target.matches('img.removLine')) return

  let line = target.closest('tr')
  tableBody.deleteRow(line)
  }
table  {
  border-collapse : collapse;
  margin          : 2em 1em;
  }
td,th {
  padding    : .2em .8em;
  border     : 1px solid darkblue;
  text-align : center;
  cursor     : pointer;
  }
<form name="my-form">
  <label> input 1 <input type="text" name="inoX1" required> </label><br>
  <label> input 2 <input type="text" name="inoX2" required> </label><br>
  <label> input 3 <input type="text" name="inoX3" required> </label><br>
  <button type="submit">add</button>
</form>

  <table id="data-table">
    <thead>
      <tr>
        <th>Exemplo</th>
        <th>Exemplo</th>
        <th>Exemplo</th>
        <th>Exemplo</th>
        <th> </th>
      <tr>
    </thead>
    <tbody></tbody>
  <table>

Upvotes: 0

David Beltran
David Beltran

Reputation: 66

I feel like you're leaving quite a bit out here since sModal is not defined anywhere but assuming you have more code elsewhere that actually works:

Your remTable is a method of the transactions object based on how you've written this. If that's your intent, you'll need to call remTable like the below:

onclick="transactions.remTable(this)"

That is assuming your element with the id='data-table' actually exists in your html, which it wouldn't without calling transactions.addTable() first, and that's not currently working since sModal doesn't exist.

Upvotes: 1

Related Questions