Empty() Vs .Remove() Vs .Detach() Jquery Tutorial

Apakah Anda tahu bahwa jQuery menyediakan aneka macam cara untuk menghapus elemen dari DOM? Metode tersebut yaitu .empty(), .remove() dan .detach()

Mungkin selama ini Anda hanya memakai satu atau dua metode saja, menyerupai halnya aku yang lebih banyak memakai metode .remove() untuk menghapus string beserta tag secara permanen. Padahal masih ada metode lain yang di studi kasus berbeda menjadi lebih sempurna 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 bencana terikat dan data jQuery yang terkait dengan elemen tersebut akan dihapus.

.detach() : Metode yang satu ini hampir sama dengan .remove(). Namun pembeda utamanya yaitu : .detach() menyimpan semua data jQuery yang terkait dengan elemen yang telah dihapus. Metode ini mempunyai kegunaan jikalau elemen yang gres 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.

Makara contohnya arahan Anda menyerupai 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 cuilan 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 memakai : $("#div").remove(); 


Metode Detach

Nah untuk metode ini aku pikir tidak terlalu banyak yang menggunakannya, padahal ini sanggup 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 arahan tersebut menyerupai sedia kala. Setelah Anda klik Detach, kemudian klik Refresh Database dan selanjutnya klik Restore, maka Anda akan melihat duplikat konten. Hal ini terjadi sebab fungsi Detach yaitu menyalin sebelum menghapus.
Setelah disalin, memuat data gres (sehingga sudah ada satu data), kemudian Restore (menempelkan salinan data), makanya akan ada 2 data yang sama.
Sumber http://www.kangsigit.com/

Share this post