Remove Table Rows & Cells In Javascript (Simple Examples)

Welcome to a quick tutorial on how to remove HTML table rows and cells in Javascript. Need to dynamically update a table? Remove table rows and cells in Javascript?

That should cover the basics, but read on for more examples!

 

 

TLDR – QUICK SLIDES

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

 

1) GET TABLE ROWS & CELLS

<!-- (A) DUMMY TABLE -->
<table id="demoA">
  <tr><td>First</td></tr>
  <tr><td>Second</td></tr>
  <tr><td>Third</td></tr>
  <tr><td>Forth</td></tr>
</table>
 
<!-- (B) JAVSCRIPT GET ROWS & CELLS -->
<script>
function getRowCell () {
  // (B1) GET TABLE
  var table = document.getElementById("demoA");

  // (B2) LOOP THROUGH ROWS & CELLS
  // TABLE.ROWS & ROW.CELLS ACT JUST LIKE ARRAYS
  for (let row of table.rows) {
    console.log(row);
    for (let cell of row.cells) {
      console.log(cell);
    }
  }

  // (B3) ACCESS INDIVIDUAL ROW & CELL
  var allRows = table.rows.length; // total number of rows
  var firstRow = table.rows[0];
  var lastRow = table.rows[allRows-1];
  var firstRowCell = firstRow.cells[0]; // first cell of first row
}
</script>
<input type="button" value="Get Row Cell" onclick="getRowCell()"/>

Before we start with removing rows and cells, I figured it will be better to explain a little more about iterating through the rows and cells of an HTML table.

• (B1) Getting the table in Javascript should be self-explanatory. var table = document.getElementById("ID");
• (B2) The table itself has a table.rows property, and it contains all the rows.
  • We can loop through the rows just like an array for (let row of table.rows) { ... }
  • Each row also has a row.cells property that contains all the cells – for (let cell in row.cells) { ... }
• (B3) Each individual row/cell can be accessed just like using ARRAY[INDEX].

 

 

2) REMOVE TABLE ROWS & CELLS

<!-- (A) DUMMY TABLE -->
<table id="demoB">
  <tr> <td>A</td> <td>B</td> </tr>
  <tr> <td>C</td> <td>D</td> </tr>
  <tr> <td>D</td> <td>E</td> </tr>
</table>
 
<!-- (B) JAVSCRIPT REMOVE ROWS & CELLS -->
<script>
function delRowCell () {
  // (B1) GET TABLE
  var table = document.getElementById("demoB");

  // (B2) REMOVE SECOND ROW
  table.deleteRow(1);

  // (B3) REMOVE FIRST CELL OF FIRST ROW
  var firstRow = table.rows[0];
  firstRow.deleteCell(0);
}
</script>
<input type="button" value="Delete Row Cell" onclick="delRowCell()"/>

This is the “full version” of the introduction snippet. When it comes to removing table rows and cells, there are only 2 functions that you need to know – TABLE.deleteRow() and ROW.deleteCell().

 

 

3) ALTERNATIVE WAY TO DELETE ROWS & CELLS

<!-- (A) DUMMY TABLE -->
<table id="demoC">
  <tr> <td class="cellC">A</td> <td>B</td> </tr>
  <tr id="rowC"> <td>C</td> <td>D</td> </tr>
  <tr> <td>D</td> <td class="cellC">E</td> </tr>
</table>
 
<!-- (B) JAVSCRIPT REMOVE ROWS & CELLS -->
<script>
function delRowCell () {
  // (B1) REMOVE ROW BY ID
  document.getElementById("rowC").remove();
 
  // (B2) REMOVE CELLS BY CSS CLASS
  for (let c of document.querySelectorAll("#demoC td.cellC")) {
    c.remove();
  }
}
</script>
<input type="button" value="Delete Row Cell" onclick="delRowCell()"/>

Lastly, there are alternate ways to remove rows and cells –

• We can use document.getElementById() to get a specific table/row/cell.
• Use document.querySelectorAll() to get a range of tables/rows/cells with a CSS selector.
• Then use ELEMENT.remove() to remove them.

 

 

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

LINKS & REFERENCES

• Traversing an HTML table with JavaScript and DOM Interfaces – MDN
• Delete Row – MDN
• How To Add Table Rows & Cells In Javascript – Code Boxx

 

INFOGRAPHIC CHEAT SHEET