Deleting a row using checkbox?

Question

I'm trying to delete a row using a checkbox but it seems just returning an error TypeError: Cannot read property childNodes of undefined

function deleteRowFromTable(tableID) {
  try {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length - 1;
    alert(rowCount);
    for (var i = 0; i < rowCount; i++) {
      var row = table.rows[i];
      var chkbox = row.cells[0].childNodes[0];
      if (null != chkbox && true == chkbox.checked) {

        table.deleteRow(i);
        rowCount--;
        i--;
      }
    }

  } catch (e) {
    alert(e);
  }
}

function addRowToTable(tableID) {
  var table = document.getElementById(tableID);
  var jobValue = jobValue + 1; //increase personVal by 1
  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);
  //            var colCount = table.rows[0].cells.length;
  //generate textbox here with dynamic id by adding jobVal at the end of id and '-'(dash) is used to split id later 
  var newcell = row.insertCell(0);
  newcell.innerHTML = "<input type='checkbox' name='chk' />";
  var newcell = row.insertCell(1);
  newcell.innerHTML = "<input type='text' name='txtLineofBusiness-" + jobValue + "' id='txtLineofBusiness-" + jobValue + "' class='txtLineofBusiness'  required/>";
  var newcell = row.insertCell(2);
  newcell.innerHTML = "<input type='text' name='txtNofUnits-" + jobValue + "' id='txtNofUnits-" + jobValue + "' class='txtNofUnits' required/>";
  var newcell = row.insertCell(3);
  newcell.innerHTML = "<input type='text' name='txtCapital-" + jobValue + "' id='txtCapital-" + jobValue + "' class='txtCapital' required/>";
  var newcell = row.insertCell(4);
  newcell.innerHTML = "<input type='text' name='txtEssential-" + jobValue + "' id='txtEssential-" + jobValue + "' class='txtEssential' required/>";
  var newcell = row.insertCell(5);
  newcell.innerHTML = "<input type='text' name='txtNonEssential-" + jobValue + "' id='txtNonEssential-" + jobValue + "' class='txtNonEssential' required/>";


}

<input type="button" value="Add Rows" onclick="addRowToTable('tableId')">
<input class="col-md-2" type="button" value="Delete Row/s" onclick="deleteRowFromTable('tableId')">
<table id="tableId">
  <thead>
    <tr>
      <th rowspan=2>#</th>
      <th rowspan=2>Line of Business</th>
      <th rowspan=2>No. of Units</th>
      <th rowspan=2>Capitalization</th>
      <th colspan="2">Gross /Sales Receipts </th>
    </tr>
    <tr>
      <th>Essential</th>
      <th>Non-essential</th>

    </tr>
  </thead>
</table>

I don't have default table rows for them. I am trying to add some rows which is successful but the delete row doesn't work. Please help.

The first row you get in your loop is the one with all the <th> in it, which does not have a checkbox. — James
– James, Commented May 17, 2017 at 3:11
You cannot redeclare a variable multiple times so you should have var newcell only once. The rest of the newcell is just a reference to the same variable (i.e. they are all identical. var X= 1, later on X=2 ... that doesn't make 2 separate X with the value of 1 and the other with a value of 2. It's just X=2. So does the addRow() function work or did you copy and paste a much smaller function then copied the pattern with different content? — zer00ne
– zer00ne, Commented May 17, 2017 at 3:23
The addRow() function works and have also remove the multiple declarations and the remove function worked. — Newbph
– Newbph, Commented May 17, 2017 at 3:28

James · Accepted Answer · 2017-05-17 04:02:38Z

1

Here's a different approach for the remove rows function

function deleteRowFromTable(tableID) {
  var table = document.getElementById(tableID);

  // get a list of just the checked checkboxes
  var chks = table.querySelectorAll("input[type=checkbox]:checked");

  for (var i=0; i < chks.length; i++) {
    // locate the tr element relative to the checkbox
    var tr = chks[i].parentNode.parentNode;
    tr.parentNode.removeChild(tr);
  }
}

edited May 17, 2017 at 4:02

answered May 17, 2017 at 3:39

James

22.4k5 gold badges29 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Deleting a row using checkbox?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related