How To 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.

 

 

REAL QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes Table Rows Useful Bits & Links
The End

 

DOWNLOAD & NOTES

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

 

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.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer 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.

 

 

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
  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;
  var firstRow = table.rows[0];
  var lastRow = table.rows[allRows-1];
  var firstRowCell = firstRow.cells[0];
}
</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 – We can also access the rows/cells just like using an array and 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 ROW, FIRST CELL
  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 id="cellC">A</td> <td>B</td> </tr>
  <tr id="rowC"> <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 ROW + PARENT, THEN REMOVE THE ROW
  var row = document.getElementById("rowC");
  var parent = row.parentElement;
  parent.removeChild(row);

  // (B2) GET CELL + PARENT, THEN REMOVE THE CELL
  var cell = document.getElementById("cellC");
  var parent = cell.parentElement;
  parent.removeChild(cell);
}
</script>
<input type="button" value="Delete Row Cell" onclick="delRowCell()"/>
A B
C D
D E

Lastly, this is the alternate way to remove rows and cells –

  • Get the row/cell itself.
  • Get the parent of the row or cell.
  • Then use PARENT.removeChild(CHILD) to remove it.

 

 

USEFUL 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.

 

INFOGRAPHIC CHEAT SHEET

Remove Table Rows Cells In Javascript (Click To Enlarge)

 

LINKS & REFERENCES

 

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 *