jQuery vide () vs supprimer ()

99

Quelle est la différence entre empty()et les remove()méthodes dans jQuery, et lorsque nous appelons l'une de ces méthodes, les objets créés seront détruits et la mémoire libérée?

javascript jquery dom-manipulation mabuzer
la source

Réponses:

160
  • empty() videra la sélection de son contenu, mais conservera la sélection elle-même.
  • remove()va vider la sélection de son contenu et supprimer la sélection elle-même.

Considérer:

<div>
    <p><strong>foo</strong></p>
</div>

$('p').empty();  // --> "<div><p></p></div>"

// whereas,
$('p').remove(); // --> "<div></div>"

Les deux suppriment les objets DOM et devraient libérer la mémoire qu'ils occupent, oui.

Voici des liens vers la documentation, qui contient également des exemples:

nickf
la source
1
Qu'en est-il des gestionnaires d'événements? J'ai un cas étrange où vide + ajouter deux fois, avec des ajouts différents, le deuxième ensemble d'éléments ajoutés exécute les gestionnaires du premier ensemble.
Killroy
1
@way trop tard, mais ils suppriment également le gestionnaire. il est possible que ces gestionnaires soient enregistrés avec une fonction telle que liveou delegate.
annulé
55

La documentation l'explique très bien. Il contient également des exemples:

avant:

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

.retirer():

$('.hello').remove();

après:

<div class="container">
  <div class="goodbye">Goodbye</div>
</div>

avant:

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

.vide():

$('.hello').empty();

après:

<div class="container">
  <div class="hello"></div>
  <div class="goodbye">Goodbye</div>
</div>

En ce qui concerne la mémoire, une fois qu'un élément est supprimé du DOM et qu'il n'y a plus de références à celui-ci, le garbage collector récupérera la mémoire lors de son exécution.

Darin Dimitrov
la source
empty ne touchera pas les attributs du sélecteur. Si vous souhaitez supprimer les attributs de l'élément selector, j'ai remarqué que jQuery removeAttr et removeClass sont bogués dans Firefox. Donc, l'option que j'avais était d'utiliser la méthode remove et d'ajouter à nouveau l'élément de conteneur, puis d'ajouter des nœuds enfants au même.
randominstanceOfLivingThing
Résumé parfait, cela explique si bien! Pour moi encore mieux que la réponse acceptée.
JonSnow
2

$("body").empty() - il supprime les éléments HTML DOM à l'intérieur de la balise body -

lorsque vous déclarez $("body").remove() - il supprime tout le DOM HTML avec le corps TAG.

user1452840
la source
17
Que fournit cette réponse qui manque dans les réponses existantes qui existent depuis trois ans?
jcsanyi