jQuery puste () a usuwanie ()

99

Jaka jest różnica między metodami empty()i remove()w programie jQueryi kiedy wywołujemy którąkolwiek z tych metod, tworzone obiekty zostaną zniszczone, a pamięć zwolniona?

javascript jquery dom-manipulation

— mabuzer
źródło

160

empty() opróżni zaznaczenie z jego zawartości, ale zachowa sam wybór.
remove()opróżni zaznaczenie z jego zawartości i usunie sam wybór.

Rozważać:

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

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

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

Obaj usuwają obiekty DOM i powinni zwolnić pamięć, którą zajmują, tak.

Oto linki do dokumentacji, która zawiera również przykłady:

— nickf
źródło

1

A co z programami obsługi zdarzeń? Mam dziwny przypadek, w którym puste + dołączenie dwukrotnie, z różnymi dołączeniami powoduje, że drugi zestaw dołączonych elementów wykonuje programy obsługi pierwszego zestawu.

— Killroy

1

@ Znacznie za późno, ale również usuwają moduł obsługi. jest szansa, że te programy obsługi zostały zarejestrowane z funkcją taką jak livelub delegate.

— cofnięte

55

Dokumentacja bardzo dobrze to wyjaśnia. Zawiera również przykłady:

przed:

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

.usunąć():

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

po:

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

przed:

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

.pusty():

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

po:

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

Jeśli chodzi o pamięć, kiedy element zostanie usunięty z DOM i nie ma już do niego odniesień, moduł odśmiecania pamięci odzyska pamięć po uruchomieniu.

— Darin Dimitrov
źródło

pusty nie dotknie atrybutów selektora. Jeśli chcesz usunąć atrybuty elementu selektora, zauważyłem, że jQuery removeAttr i removeClass są błędne w Firefoksie. Więc opcją, którą miałem, było użycie metody remove i ponowne dodanie elementu kontenera, a następnie dołączenie węzłów potomnych do tego samego.

— randominstanceOfLivingThing

Doskonałe podsumowanie, to tak dobrze to wyjaśnia! Dla mnie nawet lepsze niż zaakceptowana odpowiedź.

— JonSnow

2

$("body").empty() - usuwa elementy HTML DOM wewnątrz tagu body -

kiedy deklarujesz $("body").remove() - usuwa cały HTML DOM wraz z tagiem body.

— user1452840
źródło

17

Czego dostarcza ta odpowiedź, czego brakuje w istniejących odpowiedziach, które są tu od trzech lat?

— jcsanyi