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?

Answer 1

$(myTable).empty();

That's as fast as you get.

Answer 2

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.

Answer 3

Huge Improvement in Performance with Patch

I applied The patch for the bug and got a huge speed boost. Previously, removing approximately 4800 child elements took 42s. It now works in less than 1s. YMMV, but the changes looked pretty surgical and safe. Will report back if I see trouble.

As there were other diffs in the development version, this had to be done "by hand."

Answer 4

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