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]