Dalam seri tutorial JQuery kali ini, kita akan mempelajari cara menghapus elemen dari dokumen HTML. Menghapus elemen adalah kebalikan dari menambah elemen dan merupakan operasi penting dalam manipulasi DOM. JQuery menyediakan metode yang mudah dan efisien untuk tugas ini, yaitu remove() dan empty().

1. Menghapus Elemen dan Anak-anaknya dengan remove()

Metode remove() digunakan untuk menghapus elemen yang dipilih dan semua elemen anak-anaknya. Metode ini secara efektif “mencabut” elemen dari struktur DOM.

Contoh:

Anggaplah Anda memiliki struktur HTML berikut:

<div id="container">
  <p>Paragraf pertama</p>
  <p>Paragraf kedua</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

Jika Anda ingin menghapus seluruh elemen <div id="container">, Anda bisa menggunakan kode JQuery ini:

$('#container').remove();

Setelah kode di atas dijalankan, seluruh <div id="container">, kedua paragraf, dan daftar <ul> akan hilang dari halaman web.

Metode remove() juga bisa mengambil parameter selektor untuk menghapus elemen anak tertentu.

Contoh dengan Parameter:

// Hapus semua elemen <p> di dalam <div>
$('#container p').remove();

Kode ini akan menghapus semua <p> yang berada di dalam <div id="container">, tetapi <div id="container"> itu sendiri dan elemen <ul> akan tetap ada.

2. Mengosongkan Isi Elemen dengan empty()

Berbeda dengan remove(), metode empty() hanya akan menghapus semua elemen anak dari elemen yang dipilih, tetapi tetap meninggalkan elemen induknya.

Contoh:

Dengan struktur HTML yang sama seperti di atas, jika Anda menjalankan kode ini:

$('#container').empty();

Maka hasilnya adalah sebagai berikut:

<div id="container">
</div>

Elemen <div id="container"> masih ada, tetapi semua isinya (paragraf dan daftar) telah dihapus. Ini sangat berguna ketika Anda hanya ingin membersihkan isi suatu wadah tanpa menghapus wadah itu sendiri.

Perbandingan remove() vs empty()

Pemilihan antara remove() dan empty() tergantung pada kebutuhan spesifik Anda. Jika Anda ingin menghilangkan elemen dan seluruh isinya dari DOM, gunakan remove(). Jika Anda hanya ingin membersihkan isi dari sebuah kontainer, empty() adalah pilihan yang tepat.