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?

To remove table rows and cells in Javascript:

  1. Get the table itself – var table = document.getElementById("TABLE-ID");
  2. The rows can be removed using the deleteRow() function and specifying the row number – table.deleteRow(0);
  3. The cells can be removed similarly using the deleteCell() function.
    • var secondRow = table.rows[1];
    • secondRow.deleteCell(0);

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

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

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.

 

 

JAVASCRIPT TABLE ROWS

All right, let us now get into the examples of how to get and remove HTML table rows in Javascript.

 

1) GET TABLE ROWS & CELLS

1-get.html
<!-- (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()"/>
First
Second
Third
Forth

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

2-remove.html
<!-- (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()"/>
A B
C D
D E

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

3-alternate.html
<!-- (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()"/>
A B
C D
D E

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.

 

 

EXTRA BITS & LINKS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

 

LINKS & REFERENCES

 

INFOGRAPHIC CHEAT SHEET

Remove Table Rows Cells In Javascript (Click To Enlarge)

 

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *