jQuery leer () vs entfernen ()

99

Was ist der Unterschied zwischen empty()und remove()Methoden in jQueryund wenn wir eine dieser Methoden aufrufen, werden die zu erstellenden Objekte zerstört und Speicher freigegeben?

javascript jquery dom-manipulation Mabuzer
quelle

Antworten:

159
  • empty() entfernt den gesamten Inhalt der Auswahl.
  • remove() entfernt die Auswahl und ihren Inhalt.

Erwägen:

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

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

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

Beide entfernen die DOM-Objekte und sollten den Speicher freigeben, den sie belegen, ja.

nickf
quelle
1
Was ist mit Event-Handlern? Ich habe einen seltsamen Fall, in dem leer + zweimal anhängen, mit unterschiedlichen Anhängen bewirkt, dass der zweite Satz angehängter Elemente die Handler des ersten Satzes ausführt.
Killroy
1
@way zu spät, aber sie entfernen auch den Handler. Es besteht die Möglichkeit, dass Sie diese Handler mit einer Funktion wie liveoder registriert haben delegate.
rückgängig gemacht
54

Die Dokumentation erklärt es sehr gut. Es enthält auch Beispiele:

Vor:

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

.entfernen():

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

nach dem:

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

Vor:

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

.leer():

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

nach dem:

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

In Bezug auf den Speicher wird der Garbage Collector den Speicher zurückfordern, sobald ein Element aus dem DOM entfernt wurde und keine Verweise mehr darauf vorhanden sind.

Darin Dimitrov
quelle
leer berührt nicht die Attribute des Selektors. Wenn Sie die Attribute des Selektorelements entfernen möchten, habe ich festgestellt, dass jQuery removeAttr und removeClass in Firefox fehlerhaft sind. Ich hatte also die Möglichkeit, die Methode remove zu verwenden und das Containerelement erneut hinzuzufügen und dann untergeordnete Knoten an dasselbe anzuhängen.
RandominstanceOfLivingThing
Perfekte Zusammenfassung, das erklärt es so gut! Für mich noch besser als die akzeptierte Antwort.
JonSnow
2

$("body").empty() - Es entfernt die HTML-DOM-Elemente im Body-Tag. -

Wenn Sie deklarieren $("body").remove() , wird das gesamte HTML-DOM zusammen mit dem Body-TAG entfernt.

user1452840
quelle
17
Was liefert diese Antwort, das in den bestehenden Antworten, die seit drei Jahren hier sind, fehlt?
Jcsanyi