jQuery empty is very slow

Question

I am trying to empty an HTML table that has about 200 rows using $("#mytable").empty(). While it is emptying the rows, I cannot do anything else, looks like the UI is blocked.

Is this the right function to use? Can this operation be done in the background, in order to minimize the noticeable lag?

Answer 1

I've never had that problem before, however, I would suggest this:

$("#mytable").children().detach().remove();

More than likely it is taking a while because of the clean-up jQuery does on the elements. With them detached, it may happen quicker.

Answer 2

how about just:

document.getElementById('mytable').innerHTML = "";

Answer 3

$.empty() slow if many childrens, I'm using:

var containerNode = document.getElementById("content");
while (containerNode.hasChildNodes()) {
    containerNode.removeChild(containerNode.lastChild);
}