107

I thought this might be a fast way to remove the contents of a very large table (3000 rows):

$jq("tbody", myTable).remove();

But it's taking around five seconds to complete in firefox. Am I doing something dumb (aside from trying to load 3000 rows in to a browser)? Is there faster way to do it?

8 Answers 8

236
$("#your-table-id").empty();

That's as fast as you get.

9
  • Hmmm. Frustrating. I would think that deleting would be much faster than insertion. Kind of makes me want to do really ugly stuff like just hide the table and create a new one when I want to update it. Commented Apr 6, 2009 at 20:53
  • 11
    Yeah, well... HTML was not created to show 3k rows in a page :) Can't you think of any paginated solution? That would make it much quicker. Sure it would demand more work, but it will be a much richer user experience.
    – Seb
    Commented Apr 6, 2009 at 20:55
  • 8
    This one is good. The problem is this will remove table headers as well.
    – isuru
    Commented Jan 3, 2017 at 6:51
  • 3
    removes headers :( Commented Jun 2, 2018 at 21:14
  • 9
    This will remove everything in the table, including headers. I assume that @morgancodes wants to remove the contents, aka the rows, not the headers. For those who finds this later the solution would be $('#mytable tbody').empty();. This ensures that only the tbody gets emptied.
    – OmniOwl
    Commented Jan 13, 2020 at 5:22
86

It's better to avoid any kind of loops, just remove all elements directly like this:

$("#mytable > tbody").html("");
5
  • 7
    html("") calls empty() internally Commented Jun 16, 2016 at 20:29
  • 9
    Nice solution for me because it doesn't remove the header of a table. Thank you!
    – Daria
    Commented Jul 5, 2016 at 8:12
  • @Daria use selectors to the fullest, this will keep your headers in place: $('table tbody').empty();
    – Dani
    Commented Sep 13, 2016 at 8:55
  • what is the different between using ("#mytable > tbody") and ("#mytable tbody").
    – eaglei22
    Commented Dec 21, 2016 at 16:59
  • 1
    If you have a nested table in a row of your table, it would remove those tbody tags as well. If you just have a single table, it shouldn't be much different.
    – Shiroy
    Commented Jul 26, 2017 at 22:23
21
$("#myTable > tbody").empty();

It won't touch the headers.

10

Using detach is magnitudes faster than any of the other answers here:

$('#mytable').find('tbody').detach();

Don't forget to put the tbody element back into the table since detach removed it:

$('#mytable').append($('<tbody>'));  

Also note that when talking efficiency $(target).find(child) syntax is faster than $(target > child). Why? Sizzle!

Elapsed Time to Empty 3,161 Table Rows

Using the Detach() method (as shown in my example above):

  • Firefox: 0.027s
  • Chrome: 0.027s
  • Edge: 1.73s
  • IE11: 4.02s

Using the empty() method:

  • Firefox: 0.055s
  • Chrome: 0.052s
  • Edge: 137.99s (might as well be frozen)
  • IE11: Freezes and never returns
1
  • compared to empty(), detach() will keep all jQuery data associated with the removed elements.
    – Haseeb A
    Commented Jun 26, 2021 at 19:21
3

Two issues I can see here:

  1. The empty() and remove() methods of jQuery actually do quite a bit of work. See John Resig's JavaScript Function Call Profiling for why.

  2. The other thing is that for large amounts of tabular data you might consider a datagrid library such as the excellent DataTables to load your data on the fly from the server, increasing the number of network calls, but decreasing the size of those calls. I had a very complicated table with 1500 rows that got quite slow, changing to the new AJAX based table made this same data seem rather fast.

4
  • Thanks artlung. Doing something a bit like that actually, getting all the data at once from the server, but only drawing table rows when needed. Commented Apr 10, 2009 at 21:33
  • Sounds like a good call. I am wondering if worrying about the number of rows in a table in a browser will always be an issue, or if as memory for most computers go up this will be less of an issue.
    – artlung
    Commented Apr 10, 2009 at 22:10
  • Memory isn't a problem with the amount of data I'm loading. The bottlneck is DOM manipulation. Commented Apr 14, 2009 at 14:57
  • I think we're saying the same thing. The more data you load, the more DOM nodes you load, to me these are related in terms of memory needed. I hope your situation has improved, regardless.
    – artlung
    Commented Apr 14, 2009 at 17:52
3

this works for me :

1- add class for each row "removeRow"

2- in the jQuery

$(".removeRow").remove();
1

if you want to remove only fast.. you can do like below..

$( "#tableId tbody tr" ).each( function(){
  this.parentNode.removeChild( this ); 
});

but, there can be some event-binded elements in table,

in that case,

above code is not prevent memory leak in IE... T-T and not fast in FF...

sorry....

-2

You could try this...

var myTable= document.getElementById("myTable");
if(myTable== null)
    return;
var oTBody = myTable.getElementsByTagName("TBODY")[0];
if(oTBody== null)
    return;
try
{
    oTBody.innerHTML = "";
}
catch(e)
{
    for(var i=0, j=myTable.rows.length; i<j; i++)
        myTable.deleteRow(0);
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.