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:
- Get the table itself –
var table = document.getElementById("TABLE-ID");
- The rows can be removed using the
deleteRow()
function and specifying the row number –table.deleteRow(0);
- 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
<!-- (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) { ... }
- We can loop through the rows just like an array
- (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()"/>
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
<!-- (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
- 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

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!