Member Avatar for serkan sendur

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.

  • 5 Contributors
  • 4 Replies
  • 50K Views
  • 2 Years Discussion Span
  • Latest Post Latest Post by bertyhell

Recommended Answers

All 4 Replies

Member Avatar for ShawnCplus

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())
Member Avatar for SheSaidImaPregy

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.

Member Avatar for ~s.o.s~

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>
Member Avatar for bertyhell

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

document.getElementById("tableId").innerHTML = "";
commented: i agree, couldnt be more simple +0
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.