jquery - fastest way to remove all rows from a very large table

Question

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?

Seb · Accepted Answer · 2015-10-02T19:14:01.603

235

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

That's as fast as you get.

edited Oct 02 '15 at 19:14

answered Apr 06 '09 at 20:39

Seb

24,920
5
67
85

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. – morgancodes Apr 06 '09 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 Apr 06 '09 at 20:55
I built it paginated originally, but the client insisted on scrolling :( Good news is 3k rows is an edge case. More common will be a few hundred. – morgancodes Apr 06 '09 at 20:57
@AlejandroSazo, that's right. I've just updated the example to make it clearer. Thanks. – Seb Oct 02 '15 at 19:14
8

This one is good. The problem is this will remove table headers as well. – isuru Jan 03 '17 at 06:51
Yes, this one removing headers too, not so much useful. – asifaftab87 Jan 31 '18 at 07:03
@asifaftab87 question is about removing "the contents of a very large table", that includes everything. – Seb Feb 01 '18 at 13:11
3

removes headers :( – Sandeep Kushwah Jun 02 '18 at 21:14
8

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 Jan 13 '20 at 05:22

score 86 · Answer 2 · answered Nov 10 '11 at 11:04

86

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

$("#mytable > tbody").html("");

answered Nov 10 '11 at 11:04

gradosevic

4,809
2
36
51

7

`html("")` calls `empty()` internally – Emile Bergeron Jun 16 '16 at 20:29
9

Nice solution for me because it doesn't remove the header of a table. Thank you! – Daria Jul 05 '16 at 08:12
@Daria use selectors to the fullest, this will keep your headers in place: $('table tbody').empty(); – Dani Sep 13 '16 at 08:55
what is the different between using ("#mytable > tbody") and ("#mytable tbody"). – eaglei22 Dec 21 '16 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 Jul 26 '17 at 22:23

score 20 · Answer 3 · answered Jun 18 '19 at 18:27

20

$("#myTable > tbody").empty();

It won't touch the headers.

answered Jun 18 '19 at 18:27

AlexCodeKeen

211
2
5

Drew · Answer 4 · 2018-11-08T13:19:49.937

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

compared to `empty()`, `detach()` will keep all jQuery data associated with the removed elements. — Haseeb A, Jun 26 '21 at 19:21

score 3 · Answer 5 · edited Oct 19 '15 at 20:44

3

this works for me :

1- add class for each row "removeRow"

2- in the jQuery

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

edited Oct 19 '15 at 20:44

Pankaj

9,749
32
139
283

answered Oct 28 '13 at 09:29

Alsaket

175
1
11

score 3 · Answer 6 · answered Apr 10 '09 at 17:54

3

Two issues I can see here:

The empty() and remove() methods of jQuery actually do quite a bit of work. See John Resig's JavaScript Function Call Profiling for why.
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.

answered Apr 10 '09 at 17:54

artlung

33,305
16
69
121

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. – morgancodes Apr 10 '09 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 Apr 10 '09 at 22:10
Memory isn't a problem with the amount of data I'm loading. The bottlneck is DOM manipulation. – morgancodes Apr 14 '09 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 Apr 14 '09 at 17:52

score 1 · Answer 7 · 2009-10-06T14:15:55.117

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....

edited Oct 06 '09 at 14:15

answered Oct 06 '09 at 05:27

score -2 · Answer 8 · answered Apr 19 '12 at 11:44

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);
}

jquery - fastest way to remove all rows from a very large table

8 Answers8

Linked