Bagaimana Cara Menghapus Element tanpa Error Javascript saat Node Sudah Null?

Ditulis oleh JavaScript

Cek ulang hasil querySelector atau getElementById sebelum memanggil remove(). Pola paling aman adalah if (element) element.remove(); karena script berhenti saat Anda memanggil method pada nilai null.

Penyebab Hapus Element Gagal di Browser

Browser mengembalikan null ketika node yang dicari tidak ditemukan pada saat kode berjalan. Kondisi ini berbeda dengan node yang sempat ada lalu dihapus oleh kode lain.

  • Selector salah: ID atau class tidak cocok dengan HTML.
  • DOM belum siap: script berjalan sebelum element dirender.
  • Node sudah terhapus: referensi lama dipakai dua kali.
  • parentNode bernilai null: element sudah lepas dari dokumen atau belum dimasukkan.
  • Element dinamis belum dibuat: kode hapus berjalan sebelum kode tambah selesai.

TypeError: Cannot read properties of null berarti variabelnya null, sehingga browser tidak bisa membaca remove atau parentNode. NotFoundError berarti parent ditemukan, tetapi child yang diminta bukan anak langsung parent tersebut.

Tabel Troubleshooting Gagal Menghapus Element

Semua konteks di bawah ini untuk JavaScript browser murni, bukan API Node.js.

Kondisi Penyebab Solusi cepat
element.remove() error null Selector salah atau DOM belum siap Query ulang setelah DOM loaded, lalu cek if
removeChild NotFoundError Child bukan anak langsung parent Cek parent.contains(child) sebelum hapus
parentNode null Node sudah terlepas atau sudah dihapus Gunakan element.remove() dengan guard
Hapus element dinamis gagal Referensi basi setelah render ulang Query ulang memakai ID atau event delegation

BACA JUGA:

Cara Memperbaiki dengan Pengecekan dan Remove Aman

Ikuti urutan ini agar hapus pertama maupun hapus kedua tetap aman:

  1. Pastikan DOM selesai dimuat sebelum query.
  2. Query ulang element tepat sebelum dihapus.
  3. Periksa element tidak null.
  4. Periksa parent bila memakai removeChild.
  5. Hapus node, lalu kosongkan referensi bila masih dipakai.
// Salah: error jika #pesan tidak ada
const salah = document.querySelector('#pesan');
salah.remove();

// Benar: aman walau node null atau sudah terhapus
document.addEventListener('DOMContentLoaded', () => {
  const element = document.querySelector('#pesan');
  if (element) {
    element.remove();
  }
});

Untuk removeChild, guard tambahan diperlukan karena parent harus valid:

const parent = document.querySelector('#daftar');
const child = document.querySelector('#item-3');
if (parent && child && parent.contains(child)) {
  parent.removeChild(child);
}

Cara Mencegah Error saat Hapus Berulang

  • Query ulang setiap akan menghapus, jangan simpan referensi lama terlalu lama.
  • Gunakan event delegation untuk tombol hapus di daftar dinamis.
  • Nonaktifkan tombol hapus setelah klik pertama bila prosesnya asynchronous.
  • Pakai textContent = '' bila hanya ingin mengosongkan teks, bukan membuang node.
  • Jangan campur document dengan fs atau require Node.js karena kode ini hanya jalan di browser.

FAQ

Apakah remove() lebih aman dari removeChild?

Ya untuk kasus umum, karena remove() tidak memerlukan referensi parent yang terpisah.

Kenapa element masih null padahal ID benar?

Script biasanya berjalan sebelum DOM siap atau element tersebut dibuat ulang secara dinamis.

Bagaimana menghapus banyak element sekaligus tanpa error?

Query ulang memakai querySelectorAll, lalu loop dan cek setiap item sebelum remove().

Artikel Terkait