Tutorial Belajar jQuery Part 11: Cara Menghapus Elemen HTML dengan jQuery

Posted on

Setelah memahami cara mengambil, mengubah dan menambah element HTML dengan jQuery, di panduan belajar jQuery Duniailkom kali ini kita akan membahas Cara Menghapus Elemen HTML menggunakan method remove() dan empty().


Menghapus Unsur HTML dengan method remove() jQuery

Kita dapat menggunakan method remove() jQuery untuk menghapus element HTML yang telah tampil di halaman ketika ini. Method remove() akan menghapus tag ketika ini, dan pun seluruh isinya.

Seketika saja kita lihat contoh cara menghapus element HTML dengan method remove() jQuery:

 Disini saya mempunyai 4 tombol dan sebuah list dengan 5 tag <li>. Bagus tag <ul> maupun tag <li> dari list mempunyai atribut id masing-masing.

Kamu dapat mencobanya sendiri dari link codepen dibawah ini:

See the Pen Cara Menghapus Elemen HTML dengan method remove() jQuery by duniailkom (@duniailkom) on CodePen.10206

Ketika tombol Hapus HTML di klik, command: $(“#list_html”).remove() akan dijalankan. Akibatnya, list <li id=”list_html”>Belajar HTML di Source Code Program</li> akan terhapus. List yang tersisa akan mengisi element yang telah hilang ini (naik ke atas). Demikian pun yang terjadi ketika tombol Hapus CSS dan Hapus PHP di klik.

Bagaimana dengan tombol Hapus Seluruh!? Tombol ini akan menjalankan command $(“#belajar”).remove(). Unsur HTML yang mempunyai id=”belajar” ialah tag <ul>. Element ini yakni sebuah ‘parent element’ dari seluruh tag <li>. Dengan demikian, seluruh list akan ikut terhapus.


Menghapus Unsur HTML dengan Method empty() jQuery

Selain menggunakan method remove(), jQuery pun menyediakan method empty() untuk menghapus sebuah element HTML. Apa perbedaannya?

Method empty() hanya menghapus isi dari sebuah element, sedangkan element itu sendiri tak ikut dihapus. Hal ini berbeda dengan method remove() yang menghapus isi element dan pun element itu sendiri.

Untuk melihat contoh pemakaian method empty(), perhatikan kode program dibawah ini:

See the Pen Cara Menghapus Elemen HTML dengan method empty() jQuery by duniailkom (@duniailkom) on CodePen.10206

Kali ini saya memodifikasi sedikit kode program sebelumnya. Kini terdapat 3 tombol.

Tombol pertama-tama: Tambah jQuery akan menjalankan command:

Artinya, seluruh isi list akan dihapus. Tetapi tag <ul> tersebut hakekatnya masih ada. Untuk membuktikannya, silahkan rekan rekan klik kembali tombol Tambah jQuery, list baru akan kembali muncul.

Akan tetapi, ketika tombol Hapus Seluruh di klik, command yang dijalankan ialah:

Command ini akan menghapus seluruh list, dan pun tag <ul> nya. Dengan demikian, tag <ul> tak dapat lagi diakses. Ketika kita coba menambahkan element baru dengan men-klik tombol Tambah jQuery, tak akan terjadi apa-apa. Ini karena tag <ul> tempat dimana list berada telah hilang.

Dengan pemahaman mengenai cara mengambil, mengubah, menambah dan menghapus element, kita telah dapat mengerjakan banyak hal dengan jQuery. Berikutnya, saya akan membahas cara mengambil dan mengubah atribut element HTML.


Sumber https://www.duniailkom.com/