Jquery is the fastest way to delete all rows from a very large table

Question

I thought this could be a quick way to delete the contents of a very large table (3000 rows):

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

But it will take about five seconds to complete in firefox. Am I doing something dumb (besides trying to load 3000 lines in a browser)? Is there a faster way to do this?

Answer 1

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

It's as fast as you.

Answer 2

It is better to avoid any loops, just delete all the elements directly as follows:

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

Answer 3

Using detach is much faster than any other answer here:

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

Remember to put the tbody element back in the table, as detach deleted it:

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

Also note that with the effectiveness of $(target).find(child) syntax of $(target).find(child) is faster than $(target > child) . What for? Sizzle!

Elapsed time to empty 3,161 rows of the table

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

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

Using the empty () method:

• Firefox: 0.055 s
• Chrome: 0.052 s
• Edge: 137.99 (may be frozen)
• IE11: freezes and never returns

Answer 4

Two questions that I see here:

• The empty () and remove () jQuery methods actually do a little work. See John Resig JavaScript Function for Profiling Calls for what.

• Another thing is that for a large amount of tabular data, you can consider the datagrid library, such as the excellent DataTables to download data on the fly from the server, increasing the number of network calls, but reducing the size of these calls. I had a very complicated table with 1,500 rows that were pretty slow, switching to a new AJAX based table made the same data look pretty fast.

Answer 5

if you want to remove only quickly .. you can do as below.

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

but there may be some event related items in the table,

in this case

the above code does not prevent memory leak in IE ... TT and not fast in FF ...

sorry....

Answer 6

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

This will not affect the headlines.

Answer 7

this works for me:

1- add a class for each row "removeRow"

2- in jQuery

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

Answer 8

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