11
votes

Quel est le moyen le plus rapide de supprimer les éléments enfants du DOM dans IE?

J'utilise JQuery et j'ai un élément de table qui contient quelques centaines de lignes. Je veux supprimer toutes les lignes, puis ajouter un nouvel ensemble de lignes. Je fais cela en appelant supprimer puis appendez-le sur l'élément parent.

My Ajout logic est assez rapide et suit les conseils donnés ici: http://www.learningjquerery.com/2009/03/43439-Reasons-a-utilisateur-append-Correctement P >

Cependant, l'appel unique à supprimer prend 5 fois aussi longtemps que l'annexe. Quel est le moyen le plus rapide de nettoyer les enfants d'un élément DOM? P>

EDIT: Voici une version condensée du code que j'utilise: p>

var table = $('#mytable');
$('tbody', table).remove();
table.append(tBodyContents.join(''));


2 commentaires

Pouvez-vous publier le code que vous utilisez pour supprimer toutes les lignes?


Mettez-le là-bas; désolé je ne l'ai pas inclus auparavant!


5 Réponses :


6
votes

Je fais habituellement

$('#myTableToEmpty').html('');


5 commentaires

Probablement plus rapide que $ ('# mytabletoempty tr'). Supprimer ()


Je fais la même chose. C'est simple et rapide. +1


Cette méthode précise-t-elle également les données liées et les données jQuery? C'est une chose qui (selon la DOCS) la fonction Supprimer (). Edit: de la DOCS - En plus des éléments eux-mêmes, tous les événements liés et jQuery associés aux éléments sont supprimés.


Cela ne semble pas être plus rapide dans mon cas que d'utiliser Supprimer, mais j'y examinerai plus.


C'est la pire méthode parce que c'est le plus lent, surtout dans IE



4
votes

Qu'en est-il de $ ('# tableid'). vide () ?

Documentation pour la méthode vide


0 commentaires

1
votes

Si la vitesse est vraiment, vraiment importante, vous êtes le meilleur d'utiliser innerhtml. $ ('Tody', table) [0] .innerhtml = '';

Personnellement, je voudrais simplement ignorer JQuery Alltogéher, donner un identifiant au corps et simplement aller pour le document.getElementyID ('id'). innerhtml = '' option. Et le bureau utilise encore JQuery pour l'ajout.


1 commentaires

Je reçois une "erreur d'exécution inconnue" lorsque j'essaie ceci. Je verrai si je peux comprendre ce que je fais mal.



6
votes
function emptyElement(element){
  var i = element.childNodes.length;
  while(i--){
    element.removeChild(element.lastChild);
  }
}
this one's actually quicker than the innerHTML trick, can be much quicker, depending on your browser.  there are a few tests up on jsperf using similar functions that will give you some benchmarks...

2 commentaires

Je ne sais pas pourquoi la réponse acceptée est .html (''), tandis que c'est en fait une solution beaucoup plus rapide. Réglage innerhtml ou .html () à une chaîne vide est en fait considéré comme une mauvaise pratique exactement en raison de sa performance. Pour sauvegarder mes mots, voici un test: JSPERF.com/innerhtml-vs-removechild/239 < / a>


Il existe également une méthode de suppression de la norme de facto () qui permet d'obtenir la même - développeur.mozilla.org/en-us/docs/web/api/element/remove



0
votes

Je confirme que InnerhTML est beaucoup plus rapide pour supprimer énorme HTML d'un seul élément. Dans mon cas: xxx

merci pour les conseils


0 commentaires