Ad:

JavaScript / DHTML / AJAX Discussion Thread
Marked Solved
Views: 45878

Mar 11th, 2008

Delete all rows from table in javascript

Expand Post »

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.

Similar Threads

Adding a deleting rows in JSP
New to php and need some help with a guestbook in PHP
error on page!! Cannot solve!!Help in ASP.NET
Having prolems with a guestbook in HTML and CSS

serkan sendur

Featured Poster

Reputation Points: 854

Solved Threads: 127

Banned

Offline

2,057 posts
since Jan 2008

Permalink

Mar 11th, 2008

Re: Delete all rows from table in javascript

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

javascript Syntax (Toggle Plain Text)
var Parent = document.getElementById(tableID);
while(Parent.hasChildNodes())
{
   Parent.removeChild(Parent.firstChild);
}
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.

javascript Syntax (Toggle Plain Text)
var Parent = document.getElementById(tableID);
while(Parent.hasChildNodes())
var Parent = document.getElementById(tableID);
while(Parent.hasChildNodes())

Is MUCH more preferable to

javascript Syntax (Toggle Plain Text)
while(document.getElementById(tableID).hasChildNodes())
while(document.getElementById(tableID).hasChildNodes())

Last edited by ShawnCplus; Mar 11th, 2008 at 8:55 pm.

ShawnCplus

Sponsor

Reputation Points: 526

Solved Threads: 268

Code Monkey

Offline

1,564 posts
since Apr 2005

Permalink

Mar 14th, 2008

Re: Delete all rows from table in javascript

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

javascript Syntax (Toggle Plain Text)
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);
}
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.

Last edited by SheSaidImaPregy; Mar 14th, 2008 at 12:01 pm.

SheSaidImaPregy

Reputation Points: 43

Solved Threads: 68

Veteran Poster

Offline

1,080 posts
since Sep 2007

Permalink

Mar 16th, 2008

Re: Delete all rows from table in javascript

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

Here is my stab at it (untested)

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<!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>
<!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>

Last edited by ~s.o.s~; Mar 16th, 2008 at 7:17 am.

~s.o.s~

Super Moderator

Featured Poster

Reputation Points: 3242

Solved Threads: 719

Failure as a human

Offline

8,874 posts
since Jun 2006

Permalink

Nov 25th, 2010

Re: Delete all rows from table in javascript

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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
document.getElementById("tableId").innerHTML = "";
document.getElementById("tableId").innerHTML = "";

bertyhell

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

17 posts
since Nov 2009

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Google Maps - How do I make a connections map like this?

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: How can we delete array in javascript?

DaniWeb Message

Cancel Changes

User Name
Password