empty() vs .remove() vs .detach() jQuery Tutorial

Author : Sigit Purnomo | Released : February 26, 2018 | Category :
Apakah Anda tahu bahwa jQuery menyediakan berbagai cara untuk menghapus elemen dari DOM? Metode tersebut adalah .empty(), .remove() dan .detach()

Mungkin selama ini Anda hanya menggunakan satu atau dua metode saja, seperti halnya saya yang lebih banyak menggunakan metode .remove() untuk menghapus string beserta tag secara permanen. Padahal masih ada metode lain yang di studi kasus berbeda menjadi lebih tepat digunakan. Apasaja mereka? yuk baca lebih lanjut..

.empty() : Metode ini menghapus semua elemen, termasuk anak dari elemen namun tidak elemen induk atau tag pembungkus utama.

.remove() : Hampir sama dengan metode diatas, namun metode ini mengambil elemen dari DOM dan juga akan menghapus elemen itu sendiri. Selain unsur-unsur itu sendiri, semua kejadian terikat dan data jQuery yang terkait dengan elemen tersebut akan dihapus.

.detach() : Metode yang satu ini hampir sama dengan .remove(). Namun pembeda utamanya adalah : .detach() menyimpan semua data jQuery yang terkait dengan elemen yang telah dihapus. Metode ini berguna bila elemen yang baru saja dihapus ingin dimasukkan kembali ke DOM di lain waktu.

Mari kita pelajari cara menerapkan kodenya dan bagaimana cara kerja dari maing-masing metode.


Metode Empty

Ingat definisi untuk metode Empty diatas tadi?
Ini akan menghapus semua elemen, namun tidak elemen induk.

Jadi misalnya kode Anda seperti ini:
<div id="div">ABC DEF GHI
<span>A</span>
<span>B</span>
<div>More DIV</div>
</div>

Dengan menjalankan $("#div").empty(); maka kode-kode diatas akan menjadi:
<div id="div"></div>
Jika dilihat dari cara kerjanya, metode Empty sama persis dengan $("#div").html('');


Metode Remove

Seperti yang telah dijelaskan pada bab sebelumnya, metode remove hampir sama dengan metode empty, hanya saja ini akan menghapus semua konten yang ada didalam TAG tersebut termasuk dari TAG itu sendiri.
Contoh cara menggunakan : $("#div").remove(); 


Metode Detach

Nah untuk metode ini saya pikir tidak terlalu banyak yang menggunakannya, padahal ini dapat menyimpan salinan / clone dari data-data yang telah terhapus.

Contoh Lengkap Ketiga Metode


TUTORIAL Remove, Empty, dan Detach



Info Tambahaan
Tombol Refresh Database ini akan menampilkan ulang kode tersebut seperti sedia kala. Setelah Anda klik Detach, lalu klik Refresh Database dan selanjutnya klik Restore, maka Anda akan melihat duplikat konten. Hal ini terjadi karena fungsi Detach adalah menyalin sebelum menghapus.
Setelah disalin, memuat data baru (sehingga sudah ada satu data), lalu Restore (menempelkan salinan data), makanya akan ada 2 data yang sama.

Google+

Linkedin

Silahkan berkomentar sesuai topik yang dibahas