Menghapus Elemen HTML Dengan JQuery

Pada tutorial kali ini akan mempelajari tentang bagaimana cara menghapus elemen html dengan jquery.

Selain menambahkan elemen ke halaman website, anda juga dapat menghilangkan elemen tersebut dengan JQuery dan dengan cara yang mudah pula. Ada 2 method yang biasa digunakan untuk menghilangkan elemen, yakni :

Method empty(), digunakan untuk mengosongkan elemen yang berada di dalam elemen yang menjadi elemen pemicunya. Contoh, saya memiliki elemen <div>, yang di dalam elemen <div> ini terdapat elemen – elemen seperti <ul> dan <li>.

Lalu saya menjadikan elemen <div> ini sebagai elemen pemicunya, maka jika elemen <div> ini saya hubungkan dengan method empty(), maka secara otomatis elemen yang berada di dalam elemen <div> ini akan hilang. Berikut source code – nya :

Di bawah ini saya tampilkan output dari source code di atas beserta jendela inspect elemen untuk melihat hasilnya. Jika anda ingin menampilkan opsi inspect elemen silahkan klik kanan pada mouse di layar browser kemudian pilih inspect elemen.

menghilangkan elemen html

Dapat anda perhatikan pada gambar di atas, pada elemen yang saya lingkari merah. Dimana terdapat elemen <ul> dan <li> di dalam elemen <div>. Begitu saya klik tombol bertuliskan empty(). Maka elemen <ul> dan <li> ini akan hilang.

menghapus elemen html

Jika ingin melihat hasilnya secara langsung, silahkan edit – edit source code di dalam frame codepen di bawah ini :

See the Pen
VgvoQG
by Lautankode (@lautankode)
on CodePen.

Selain dengan menggunakan method empty(), sebenarnya masih ada cara kedua untuk menghilangkan elemen, yakni dengan menggunakan method remove(). Namun bila menggunakan method ini, maka semua elemen yang ada di dalamnya akan hilang termasuk elemen yang menjadi elemen pemicunya.

Di bawah ini adalah hasil dari source code di atas :

cara menghapus elemen pada halaman website

Dan apabila button remove() di klik, maka mulai dari elemen yang menjadi elemen pemicu dan elemen – elemen yang berada di dalamnya akan hilang.

menghapus elemen html dengan jquery

Silahkan lakukan percobaan pada live editor berikut :

See the Pen
fungsi method remove() pada jquery
by Lautankode (@lautankode)
on CodePen.


Kesimpulan

Method empty() berbeda dengan method remove(). Jika anda ingin mengetahui perbedaannya secara jelas, pertama – tama anda perhatikan dulu selector yang di jadikan acuannya.

Jika pada contoh di atas saya menggunakan struktur elemen div > ul > li. Dan selector yang saya jadikan pemicunya adalah elemen div, maka :

Pada method div empty() akan mengosongkan segala elemen yang berada di dalam elemen div ini, sedangkan pada method div remove() akan menghapus elemen div dan otomatis juga turut menghapus elemen – elemen yang berada di dalamnya.


Demikian tutorial dari cara menghapus elemen HTML dengan JQuery.

Dan jika ada pertanyaan lebih lanjut, silahkan berikan komentar pada kolom komentar di bawah ini.

Leave a comment

Your email address will not be published. Required fields are marked *

× Contact Us