jQuery boş () - remove ()

99

İçindeki yöntemler empty()ve remove()yöntemler arasındaki fark nedir ve jQuerybu yöntemlerden herhangi birini çağırdığımızda, yaratılan nesneler yok edilecek ve bellek serbest bırakılacak?

javascript jquery dom-manipulation

— mabuzer
kaynak

160

empty() içerik seçimini boşaltacak, ancak seçimin kendisini koruyacaktır.
remove()içerik seçimini boşaltacak ve seçimin kendisini kaldıracaktır.

Düşünmek:

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

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

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

Her ikisi de DOM nesnelerini kaldırır ve aldıkları belleği serbest bırakmalıdır, evet.

Örnekler de içeren belgelere bağlantılar aşağıda verilmiştir:

— nickf
kaynak

1

Olay işleyicileri ne olacak? Boş + 'nın iki kez eklendiği garip bir durumum var, farklı eklerle eklenen ikinci öğe kümesinin ilk kümenin işleyicilerini yürütmesine neden oluyor.

— Killroy

1

@way çok geç, ancak işleyiciyi de kaldırıyorlar. şöyle bir şey fonksiyonu ile kayıtlı olanlar işleyicileri olduğu bir şans var liveya delegate.

— geri alındı

55

Belgeler bunu çok iyi açıklıyor. Ayrıca örnekler içerir:

önce:

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

.Kaldırmak():

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

sonra:

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

önce:

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

.boş():

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

sonra:

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

Bellek söz konusu olduğunda, DOM'den bir öğe kaldırıldığında ve ona daha fazla referans olmadığında, çöp toplayıcı çalıştığında belleği geri alır.

— Darin Dimitrov
kaynak

boş, seçicinin özelliklerine dokunmayacaktır. Seçici elemanın özniteliklerini kaldırmak istiyorsanız, jQuery removeAttr ve removeClass'ın firefox'ta hatalı olduğunu fark ettim. Bu yüzden, sahip olduğum seçenek, kaldırma yöntemini kullanmak ve kapsayıcı öğesini tekrar eklemek ve ardından alt düğümleri buna eklemek oldu.

— randominstanceOfLivingThing

Mükemmel özet, bu onu çok iyi açıklıyor! Benim için kabul edilen cevaptan daha iyi.

— JonSnow

2

$("body").empty() - body etiketi içindeki HTML DOM öğelerini kaldırır -

beyan ettiğinizde $("body").remove() - tüm HTML DOM'u body TAG ile birlikte kaldırır.

— kullanıcı1452840
kaynak

17

Bu cevap, üç yıldır burada olan mevcut cevaplarda eksik olan neyi sağlıyor?

— jcsanyi