1.11M Members

Delete all rows from table in javascript

 
0
 

for(var i = document.getElementById("tableId").rows.length; i > 0;i--)
{
document.getElementById("tableId").deleteRow(i -1);
}

I had to write this because it took me an hour to find out the error about deleting rows from an html table by javascript.
If you do this it generates an error :

for(var i = 0; i <document.getElementById("tableId").rows.length; i++)
{
document.getElementById("tableId").deleteRow(i -1);
}

The code above wont delete all the rows because "i" is not set back to 0 although the table rows' index will be set again beginning from zero after any row is deleted from the table.

 
0
 

The easiest way to delete all rows from a table is this

var Parent = document.getElementById(tableID);
while(Parent.hasChildNodes())
{
   Parent.removeChild(Parent.firstChild);
}

Note that when using removeChild that if it removes the last element it will also delete the parent node. I guess it assumes that if you have no child nodes then you don't need the parent node.

Also, don't make a habit of making function calls inside the loop, it is costly.

var Parent = document.getElementById(tableID);
while(Parent.hasChildNodes())

Is MUCH more preferable to

while(document.getElementById(tableID).hasChildNodes())
 
0
 

If you still need it, this will delete all rows from your table, except for your head row.

var table = document.getElementById("tableid");
//or use :  var table = document.all.tableid;

for(var i = table.rows.length - 1; i > 0; i--)
{
    table.deleteRow(i);
}

Change the red "0" to "-1" if you wish to delete all rows, including the head row if you have one.

 
0
 

The deleteRow(index) approach used here is much better than the ad hoc removeChild() approach IMO.

Here is my stab at it (untested)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv"Script-Content-Type" content="text/javascript">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Expires" content="0"> <!-- disable caching -->
    <title>Example</title>
    <script type="text/javascript">
    function deleteRows(id, toDeleteHeader) {
      var obj = document.getElementById(id);
      if(!obj && !obj.rows)
        return;
      if(typeof toDeleteHeader == 'undefined')
        toDeleteHeader = false;
      var limit = !!toDeleteHeader ? 0 : 1;
      var rows = obj.rows; 
      if(limit > rows.length)
        return;
      for(; rows.length > limit; ) {
        obj.deleteRow(limit);
      }
    }
    </script>
</head>
<body>
  <table id="tbl" name="tbl" border="1">
  <thead>
    <tr>
      <td>No.</td>
      <td>Content</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Something</td>
    </tr>
  </tbody>
  </table>
  <br><br>
  <a href="#" onclick="deleteRows('tbl', false);">Delete rows</a>
</body>
</html>
Question Answered as of 5 Years Ago by ShawnCplus, ~s.o.s~ and SheSaidImaPregy
 
0
 

i think the fastest and most efficient way is like this:

document.getElementById("tableId").innerHTML = "";
Isn't it about time forums rewarded their contributors?

Earn rewards points for helping others. Gain kudos. Cash out. Get better answers yourself.

It's as simple as contributing editorial or replying to discussions labeled or OP Kudos

You
This question has already been solved: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article