5

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?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
G-Man
  • 7,232
  • 18
  • 72
  • 100

4 Answers4

10

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.

Kevin B
  • 94,570
  • 16
  • 163
  • 180
  • Can you explain why it is faster ? both empty and remove , removes the events from child nodes. – Royi Namir Sep 23 '12 at 20:09
  • @RoyiNamir With just .remove(), the elements are cleaned up and removed 1 by 1, while .detach detaches them all at once then cleans up and removes 1 by 1. This may be an optimization that jQuery can take (if it hasn't already, this is a year old today.) – Kevin B Sep 24 '12 at 14:46
  • @KevinB _detaches them all at once_ ? not accurate , foreach children he detache and remove. I cant see the difference. in fact it should be more slow than `$("#mytable").children().remove();` detach is used if you want to keep the events and data. so you do detach , but then you remove it. so i can't see the reason. please reply. (maybe i'm missing something here) – Royi Namir Sep 24 '12 at 17:33
  • @RoyiNamir No, you're right, it still goes through each one individually, but it doesn't perform any of the plugin cleanup until after the elements have been detached. I didn't dig in further, but if you really want to know why it makes a difference in that version of jquery, you're going to have to go to the source. The suggestion i made here is just a common way of improving performance by acting on elements that aren't attached to the dom. – Kevin B Sep 24 '12 at 17:43
  • It's slower in 1,5 times. – zishe Dec 02 '13 at 02:51
  • This didn't work for me. I have about 5k items in my select list. – Timothy Gonzalez Jul 12 '16 at 15:58
  • 1
    This was from 2011, i'm not familiar enough with current versions of jquery to know if any changes were made that would affect this answer. but... selecting 5k items seems like a design flaw to me. – Kevin B Jul 12 '16 at 16:00
4

how about just:

document.getElementById('mytable').innerHTML = "";
Matthew
  • 12,892
  • 6
  • 42
  • 45
  • 1
    You're already using jQuery, so why try and shave nanoseconds? `$('#mytable').html('');` is much cleaner. – Blender Sep 24 '11 at 04:49
  • Yep that would work too. I don't mind using good ol javascript for the simple stuff, after all you are writing javascript not jquery. In fact I generally only create a jQuery object if I really to. But I think it's a matter of taste – Matthew Sep 24 '11 at 05:01
  • But `document.getElementById` is more complex than `$` ;) – Blender Sep 24 '11 at 05:05
  • document.getElementById('mytable').innerHTML = ""; caused a huge memory leak in IE 8! :( – G-Man Sep 25 '11 at 15:45
3

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

var containerNode = document.getElementById("content");
while (containerNode.hasChildNodes()) {
    containerNode.removeChild(containerNode.lastChild);
}
Serhii Bohutskyi
  • 2,261
  • 2
  • 28
  • 28
0

You could just remove the table itself:

$('#mytable').remove()

Or the children of the table only:

$('#mytable').children().remove()
Blender
  • 289,723
  • 53
  • 439
  • 496