I can't delete the rows that are selected. I want to delete the rows checked with checkbox. But I can't access the table rows and check whether the checkbox is checked. What should I do?

Code:

<div class="container">
  <div class="tab tab-1">
    <table id="table" border="1">
      <tr>
        <th></th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Age</th>
        <th>edit</th>
      </tr>
      <tr>
        <td><input type="checkbox" id="select"></td>
        <td>A1</td>
        <td>B1</td>
        <td>10</td>
        <td><input type="button" value="edit" id="edit"></td>
      </tr>
      <tr>
        <td><input type="checkbox" id="select"></td>
        <td>A3</td>
        <td>B3</td>
        <td>30</td>
        <td><input type="button" value="edit" id="edit"></td>
      </tr>
      <tr>
        <td><input type="checkbox" id="select" class="select"></td>
        <td>A2</td>
        <td>B2</td>
        <td>20</td>
        <td><input type="button" value="edit" id="edit"></td>
      </tr>
    </table>
  </div>
  <button onclick="deleteRow();">Remove</button>
  <script>
    function deleteRow() {
      var table = document.getElementById("table");
      var rowCount = table.rows.length;
      console.log("rowcount : " + rowCount);
      for (var i = 1; i < rowCount; i++) {
        var c = table.rows[i].cells[0].childNodes;
        console.log(c);
        if (c.checked == 1) {
          console.log("i :" + i);
          table.deleteRow(i);
        }
      }
    }.
  </script>

I can't delete the rows that are selected. I want to delete the rows checked with checkbox. But I can't access the table rows and check whether the checkbox is checked. What should I do?

Code:

<div class="container">
  <div class="tab tab-1">
    <table id="table" border="1">
      <tr>
        <th></th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Age</th>
        <th>edit</th>
      </tr>
      <tr>
        <td><input type="checkbox" id="select"></td>
        <td>A1</td>
        <td>B1</td>
        <td>10</td>
        <td><input type="button" value="edit" id="edit"></td>
      </tr>
      <tr>
        <td><input type="checkbox" id="select"></td>
        <td>A3</td>
        <td>B3</td>
        <td>30</td>
        <td><input type="button" value="edit" id="edit"></td>
      </tr>
      <tr>
        <td><input type="checkbox" id="select" class="select"></td>
        <td>A2</td>
        <td>B2</td>
        <td>20</td>
        <td><input type="button" value="edit" id="edit"></td>
      </tr>
    </table>
  </div>
  <button onclick="deleteRow();">Remove</button>
  <script>
    function deleteRow() {
      var table = document.getElementById("table");
      var rowCount = table.rows.length;
      console.log("rowcount : " + rowCount);
      for (var i = 1; i < rowCount; i++) {
        var c = table.rows[i].cells[0].childNodes;
        console.log(c);
        if (c.checked == 1) {
          console.log("i :" + i);
          table.deleteRow(i);
        }
      }
    }.
  </script>

• javascript
• html

3 Answers 3

Use querySelectorAll() and :checked to select all checked checkbox.

parentNode.parentNode is to get parent tr node

function deleteRow() {
  document.querySelectorAll('#table .select:checked').forEach(e => {
    e.parentNode.parentNode.remove()
  });
}

<div class="container">
  <div class="tab tab-1">
    <table id="table" border="1">
      <tr>
        <th></th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Age</th>
        <th>edit</th>
      </tr>
      <tr>
        <td><input type="checkbox" class="select"></td>
        <td>A1</td>
        <td>B1</td>
        <td>10</td>
        <td><input type="button" value="edit" id="edit"></td>
      </tr>
      <tr>
        <td><input type="checkbox" class="select"></td>
        <td>A3</td>
        <td>B3</td>
        <td>30</td>
        <td><input type="button" value="edit" id="edit"></td>
      </tr>
      <tr>
        <td><input type="checkbox" class="select"></td>
        <td>A2</td>
        <td>B2</td>
        <td>20</td>
        <td><input type="button" value="edit" id="edit"></td>
      </tr>
    </table>
  </div>
</div>
<button onclick="deleteRow();">Remove</button>

Note: Avoid using duplicate id

The way you go about deleting the rows is wrong, because you use a for loop with a pre-cached length, but when a row, say i, is deleted then the row i+1 bees i and the length changes.

A correct way to solve this problem is to use a while loop without caching the number of rows and incrementing the index only when you don't delete a row.

Example:

function deleteRow () {
  /* Cache the table. */
  var table = document.getElementById("table"); 
  
  /* Create the index used in the loop. */
  var index = 1;
  
  /* Repeat as long as the index is less than the number of rows. */
  while (index < table.rows.length) {
    /* Get the input of the cell. */
    var input = table.rows[index].cells[0].children[0];
    
    /* Check whether the input exists and is checked. */
    if (input && input.checked) {
      /* Delete the row at the current index. */
      table.deleteRow(index);
    }
    else {
      /* Increment the index. */
      index++;
    }
  }
}

<div class="container">
  <div class="tab tab-1">
    <table id="table" border="1">
      <tr>
        <th></th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Age</th>
        <th>edit</th>
      </tr>
      <tr>
        <td><input type="checkbox" id="select"></td>
        <td>A1</td>
        <td>B1</td>
        <td>10</td>
        <td><input type="button" value="edit" id="edit"></td>
      </tr>
      <tr>
        <td><input type="checkbox" id="select"></td>
        <td>A3</td>
        <td>B3</td>
        <td>30</td>
        <td><input type="button" value="edit" id="edit"></td>
      </tr>
      <tr>
        <td><input type="checkbox" id="select" class="select"></td>
        <td>A2</td>
        <td>B2</td>
        <td>20</td>
        <td><input type="button" value="edit" id="edit"></td>
      </tr>
    </table>
  </div>
  <button onclick="deleteRow();">Remove</button>

The problem with your code is that after deleting a row, the index of all subsequent rows immediately decreases by one because HTMLTableElement.prototype.rows returns a live HTMLCollection.

That not only leads to your loop executing too often (because you cached table.rows.length), but also to subsequent indexes no longer matching.

I'd suggest using the much more readable for...of loop, which only gets slightly more plicated because tables don't seem to allow for using table.removeChild(row):

function deleteRow() {
  const table = document.getElementById("table");
  for (const [index, row] of [...table.rows].entries()) {
    if (row.querySelector('input:checked')) {
      table.deleteRow(index);
    }
  }
}

<table id="table" border="1">
  <tr>
    <th></th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
    <th>edit</th>
  </tr>
  <tr>
    <td><input type="checkbox" class="select"></td>
    <td>A1</td>
    <td>B1</td>
    <td>10</td>
    <td><input type="button" value="edit" class="edit"></td>
  </tr>
  <tr>
    <td><input type="checkbox" class="select"></td>
    <td>A3</td>
    <td>B3</td>
    <td>30</td>
    <td><input type="button" value="edit" class="edit"></td>
  </tr>
  <tr>
    <td><input type="checkbox" class="select"></td>
    <td>A2</td>
    <td>B2</td>
    <td>20</td>
    <td><input type="button" value="edit" class="edit"></td>
  </tr>
</table>
<button onclick="deleteRow();">Remove</button>