Deleting multiple rows in a HTML table using checkbox in javascript

Question

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>

User863 · Accepted Answer · 2019-08-24 07:58:27Z

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

answered Aug 24, 2019 at 7:58

User863

20.1k3 gold badges20 silver badges45 bronze badges

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

1 Comment

Andreas Over a year ago

Adding some info on why the approach of TO doesn't work would make this answer even better. Now TO has a working solution but doesn't know why his approach didn't work as expected.

Angel Politis · Accepted Answer · 2019-08-24 08:04:27Z

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 becomes 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>

"A correct way to solve..." - Yes, but it would be way easier to delete the rows from the end, because then the index will always be correct without additional "magic" (for (let i = table.rows.length - 1; i >= 0; i--) { ... }) :)

connexo · Accepted Answer · 2019-08-24 08:08:31Z

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 complicated 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>

Collectives™ on Stack Overflow

Deleting multiple rows in a HTML table using checkbox in javascript

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related