jQuery kosong () vs hapus ()

99

Apa perbedaan antara empty()dan remove()metode jQuery, dan ketika kita memanggil salah satu metode ini, objek yang dibuat akan dimusnahkan dan memori dilepaskan?

javascript jquery dom-manipulation mabuzer
sumber

Jawaban:

160
  • empty() akan mengosongkan pilihan kontennya, tetapi mempertahankan pilihan itu sendiri.
  • remove()akan mengosongkan pilihan isinya dan menghapus seleksi itu sendiri.

Mempertimbangkan:

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

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

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

Keduanya menghapus objek DOM dan harus melepaskan memori yang mereka gunakan, ya.

Berikut tautan ke dokumentasi, yang juga berisi contoh:

nickf
sumber
1
Bagaimana dengan event handler? Saya memiliki kasus aneh di mana kosong + tambahkan dua kali, dengan penambahan yang berbeda menyebabkan set kedua dari item yang ditambahkan mengeksekusi penangan dari set pertama.
Killroy
1
@terlambat, tetapi mereka juga menghapus pawang juga. ada kemungkinan Anda memiliki penangan yang terdaftar dengan fungsi seperti liveatau delegate.
dibatalkan
55

Dokumentasi menjelaskannya dengan sangat baik. Ini juga berisi contoh:

sebelum:

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

.menghapus():

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

setelah:

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

sebelum:

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

.kosong():

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

setelah:

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

Sejauh menyangkut memori, setelah elemen dihapus dari DOM dan tidak ada lagi referensi ke dalamnya, pengumpul sampah akan mengambil kembali memori saat dijalankan.

Darin Dimitrov
sumber
kosong tidak akan menyentuh atribut pemilih. Jika Anda ingin menghapus atribut elemen pemilih, saya perhatikan bahwa jQuery removeAttr dan removeClass bermasalah di firefox. Jadi opsi yang saya miliki adalah menggunakan metode remove dan menambahkan elemen container lagi lalu menambahkan node turunan ke node yang sama.
randominstanceOfLivingThing
Ringkasan sempurna, ini menjelaskannya dengan sangat baik! Bagi saya bahkan lebih baik daripada jawaban yang diterima.
JonSnow
2

$("body").empty() - itu 'menghapus elemen HTML DOM di dalam tag body -

ketika Anda mendeklarasikan $("body").remove() - itu menghapus seluruh DOM HTML bersama dengan TAG badan.

pengguna1452840
sumber
17
Apa yang disediakan jawaban ini yang tidak ada dalam jawaban yang ada yang telah ada di sini selama tiga tahun?
jcsanyi