I have a table which contains about 1,500 rows.
I'm removing the table from the DOM with the following jQuery code:
$('#myTable').remove();
which takes about 300ms, creating a quite noticeable lag.
Doing the same thing with removeChild():
var myTable = $('#myTable')[0] ;
myTable.parentNode.removeChild(myTable);
takes about 30ms.
I can easy use the removeChild() version, but I was puzzled why jQuery's remove() would take so much longer? Is the removeChild() version not clearing something that jQuery is?
Demo: jspref
From the documentation :
In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed.
This means :
cleanData
for itself and the childs)This appears clearly in the source code :
remove: function( selector, keepData ) {
var elem,
i = 0;
for ( ; (elem = this[i]) != null; i++ ) {
if ( !selector || jQuery.filter( selector, [ elem ] ).length > 0 ) {
if ( !keepData && elem.nodeType === 1 ) {
jQuery.cleanData( getAll( elem ) );
}
if ( elem.parentNode ) {
if ( keepData && jQuery.contains( elem.ownerDocument, elem ) ) {
setGlobalEval( getAll( elem, "script" ) );
}
elem.parentNode.removeChild( elem );
}
}
}
return this;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With