Empty() Vs .Remove() Vs .Detach() Jquery Tutorial
Apakah Anda tahu bahwa jQuery menyediakan banyak sekali cara untuk menghapus elemen dari DOM? Metode tersebut yakni .empty(), .remove() dan .detach()
Mungkin selama ini Anda hanya memakai satu atau dua metode saja, ibarat 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 tragedi terikat dan data jQuery yang terkait dengan elemen tersebut akan dihapus.
.detach() : Metode yang satu ini hampir sama dengan .remove(). Namun pembeda utamanya yakni : .detach() menyimpan semua data jQuery yang terkait dengan elemen yang telah dihapus. Metode ini berkhasiat 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 isyarat Anda ibarat ini:
Dengan menjalankan $("#div").empty(); maka kode-kode diatas akan menjadi:
Metode Remove
Seperti yang telah dijelaskan pada penggalan 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.
Info Tambahaan
Tombol Refresh Database ini akan menampilkan ulang isyarat tersebut ibarat sedia kala. Setelah Anda klik Detach, kemudian klik Refresh Database dan selanjutnya klik Restore, maka Anda akan melihat duplikat konten. Hal ini terjadi alasannya yakni fungsi Detach yakni 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/
Mungkin selama ini Anda hanya memakai satu atau dua metode saja, ibarat 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 tragedi terikat dan data jQuery yang terkait dengan elemen tersebut akan dihapus.
.detach() : Metode yang satu ini hampir sama dengan .remove(). Namun pembeda utamanya yakni : .detach() menyimpan semua data jQuery yang terkait dengan elemen yang telah dihapus. Metode ini berkhasiat 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 isyarat Anda ibarat 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 penggalan 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 isyarat tersebut ibarat sedia kala. Setelah Anda klik Detach, kemudian klik Refresh Database dan selanjutnya klik Restore, maka Anda akan melihat duplikat konten. Hal ini terjadi alasannya yakni fungsi Detach yakni 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/
0 Response to "Empty() Vs .Remove() Vs .Detach() Jquery Tutorial"
Posting Komentar