Ketemu dalam Satu Baris Cara Mencari Parent Element Tertentu Javascript

Ditulis oleh JavaScript

Cara mencari parent element tertentu JavaScript paling cepat memakai element.closest(selector). Method ini menelusuri elemen itu sendiri lalu ke atas sampai menemukan ancestor yang cocok dengan selector CSS.

const tombol = document.querySelector(".btn-hapus");
const card = tombol.closest(".card");

if (card) {
  card.remove();
}

Kode di atas mencari ancestor terdekat dengan class .card dari tombol. Jika tidak ada yang cocok, hasilnya null, jadi selalu cek sebelum memanggil remove(), classList, atau querySelector lanjutan.

Gunakan closest() untuk Cari Parent Tertentu

Panggil closest() dari elemen awal, bukan dari document. Pencarian berjalan ke atas melalui rantai parent sampai selector cocok.

const item = document.querySelector("#produk-12 .harga");
const wrapper = item.closest("article.produk");
  • Selector harus string CSS valid, misalnya .card, #form-login, atau [data-list].
  • Selector kosong atau sintaks salah membuat browser melempar SyntaxError.
  • Pencarian termasuk elemen awal itu sendiri, bukan hanya parent di atasnya.
  • Gunakan pengecekan if (wrapper) karena hasil bisa null.

Perbandingan parentElement, parentNode, dan closest()

Metode Cocok Untuk Catatan
parentElement Naik satu tingkat pasti Mengembalikan elemen atau null
parentNode Menelusuri semua node DOM Bisa mengembalikan Document atau DocumentFragment
closest() Mencari ancestor dengan selector Berhenti pada kecocokan pertama dari bawah

Rantai parentElement.parentElement rapuh karena struktur HTML mudah berubah. Satu wrapper tambahan membuat kode langsung salah sasaran. closest(".card") tetap benar selama ancestor target masih ada.

Hati-hati memakai parentNode untuk manipulasi class atau atribut. Node dokumen tidak punya classList, sehingga akses langsung bisa menghasilkan TypeError.

BACA JUGA:

Langkah Mencari Parent dari Event Klik

Pola ini umum untuk tombol hapus, tombol edit, atau list yang dibuat dinamis.

  1. Pasang satu listener pada container induk, bukan pada setiap tombol.
  2. Ambil elemen yang diklik lewat e.target.closest("button").
  3. Cari parent tujuan, misalnya e.target.closest("li").
  4. Jalankan aksi seperti hapus baris atau toggle class.
document.querySelector("#daftar").addEventListener("click", (e) => {
  const baris = e.target.closest("li");
  if (!baris) return;
  if (e.target.closest(".hapus")) baris.remove();
});
  • Pastikan script berjalan setelah DOM dimuat atau letakkan sebelum penutup body.
  • Periksa selector container benar-benar ada sebelum addEventListener.
  • Untuk elemen dinamis, tetap delegasikan event ke parent statis.

FAQ

Apa beda closest() dan parentElement?

parentElement hanya naik satu tingkat, sedangkan closest() mencari ke atas sampai selector cocok.

Kenapa closest() mengembalikan null?

Tidak ada ancestor, termasuk elemen itu sendiri, yang cocok dengan selector yang diberikan.

Bagaimana cari parent dari elemen dinamis?

Pasang listener di container statis lalu gunakan e.target.closest() untuk menemukan baris target.

Artikel Terkait