G-Man
G-Man

Reputation: 7241

jQuery empty is very slow

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?

Upvotes: 5

Views: 5264

Answers (4)

Serhii Bohutskyi
Serhii Bohutskyi

Reputation: 2259

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

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

Upvotes: 3

Kevin B
Kevin B

Reputation: 95017

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.

Upvotes: 10

Matthew
Matthew

Reputation: 13332

how about just:

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

Upvotes: 4

Blender
Blender

Reputation: 298226

You could just remove the table itself:

$('#mytable').remove()

Or the children of the table only:

$('#mytable').children().remove()

Upvotes: 0

Related Questions