MENGHAPUS ELEMEN DOM

Javascript menyediakan metode untuk menghapus elemen DOM yang ada. Fitur ini sangat berguna saat kamu ingin memodifikasi struktur halaman web secara dinamis.

Menghapus Elemen dengan Metode removeChild()

Metode removeChild() digunakan untuk menghapus elemen anak dari elemen tertentu. Metode ini membutuhkan satu argumen, yaitu elemen anak yang akan dihapus. Berikut adalah contoh penggunaannya:

var element = document.getElementById("elementKu");
element.removeChild(element.childNodes[0]);

Dalam contoh di atas, skrip akan mencari elemen dengan id “elementKu” dan menghapus elemen anak pertama dari elemen tersebut.

Menangani Eror removeChild()

Jika elemen anak yang ingin dihapus tidak ada, metode removeChild() akan menghasilkan error. Kamu dapat menghandle situasi ini dengan mencoba kode berikut:

var element = document.getElementById("elementKu");
if (element.hasChildNodes()){
  element.removeChild(element.childNodes[0]);
}

Dalam kode tersebut, metode hasChildNodes() digunakan untuk memeriksa apakah elemen memiliki anak atau tidak. Jika memiliki, maka akan dilakukan penghapusan elemen tersebut.

Menghapus Elemen dengan Metode remove()

Lebih sederhana lagi, kamu bisa menggunakan metode remove(). Metode ini tidak membutuhkan argumen apa pun dan dapat langsung memanggil elemen yang ingin dihapus.

var element = document.getElementById("elementKu");
element.remove();

Metode remove() lebih sederhana dari removeChild(), karena kamu tidak perlu mengidentifikasi node anak. Selain itu, ini juga akan bekerja bahkan jika elemen tidak memiliki elemen orang tua.

Namun, perlu diingat bahwa dukungan browser untuk metode ini belum seluas removeChild(). Beberapa browser lama mungkin tidak mendukung remove(), jadi pertimbangkan ini saat memutuskan metode apa yang akan digunakan.