Remove rows from an HTML table

Question

I have a rather big table where I dynamically remove some rows. It works, but it is very slow. Right now it takes approx. 1.5 seconds to remove 50 rows on IE8 and Firefox (almost no difference between the browsers).

I know that DOM manipulation is slow in general, but there must be a faster way to do this.

Right now, I'm using this syntax:

$("#myTable tr").slice(250, 300).remove();

The offsets in the slice() method may vary. I use slice() since this was recommended in jQuerys help and other methods to perform the same thing - like find() or eq() - where not faster. I read about doing an empty() before the removal, but that was even slower.

Answer 1

Consider using the actual javascript, in case jQuery is triggering render refreshes: http://jsfiddle.net/MbXX5/

var removeRows = function(ofTable,from,to) {
    for(var row=to; row>=from; --row) {
        ofTable.deleteRow(row);
    }
};

As you can see in the jsfiddle, this is instant. Note that I'm traversing the array in reverse, so that the row numbers remain correct. There is a chance this improves the performance, depending on the DOM code and the JIT strategies the browser uses.

[Edit: new jsfiddle with colour-coded cells to make it really obvious which rows have gone]

Answer 2

The problem is that for every row that you .remove(), the table is redrawn by the browser. To make it faster, remove the table from the DOM, take out the lines and put the table back at its place.

$table = $("#myTable").clone(true,true);//First true to keep events, second true to deepcopy childs too. Remove it if you do not need it to make it faster.
$table.find("tr").slice(250,300);remove();
$("#myTable").replaceWith($table);

Answer 3

You can use filter but I don't think it will be faster

$("#myTable tr").filter(function(index){
     return index > 250 && index < 300;
).remove();

Answer 4

The problem is the browser tries to update the screen view of the DOM on each row removal.

You can do it by one of

• removing the table, from the document, removing all rows and after that inserting it back
• cloning the table, removing elements on the clone, replacing the table with the clone
• or if the amount of rows remaining is less than the ones remove, you could create a new table, insert all the rows in that and replace the existing table with the new one

The main idea is for the table to not be attached to the DOM when you do the removals, this way it will only update the view once all the rows are removed.

Answer 5

Is it possible you add an ID to each row? And then select the rows directly by ID and removing the rows? Like so:

var el = document.GetElementById("RowID_1");
document.removeChild(el);

jQuery is on top of Javascript. I guess using javascript directly is faster.

edit: Ofcourse you can create a loop like this:

for(i=250;i<=300;i++)
{
    var el = document.GetElementById("RowID_" + i);
    document.removeChild(el);  
}

edit 2: Hide the table while editing so the browser does not update after each removal ? ;)

Answer 6

Try this . i hope it will help you

$("#myTable tr").slice(250, 300).html('');