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!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TLDR – QUICK SLIDES

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

 

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.

 

 

 

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