W3schools Javascript Remove Element

W3schools Javascript Remove Element

3 min read Jun 18, 2024
W3schools Javascript Remove Element

Cara Menghapus Elemen HTML dengan JavaScript di W3Schools

W3Schools adalah sumber daya yang bagus untuk mempelajari HTML, CSS, dan JavaScript. Situs web ini menyediakan tutorial yang komprehensif dan mudah dipahami untuk berbagai topik pemrograman. Salah satu topik yang dibahas adalah cara menghapus elemen HTML dengan JavaScript.

Berikut adalah beberapa cara untuk menghapus elemen HTML dengan JavaScript di W3Schools:

1. Menggunakan removeChild()

Metode removeChild() adalah cara paling umum untuk menghapus elemen HTML dari DOM. Metode ini menerima satu argumen, yaitu elemen yang ingin Anda hapus.

Contoh:

// Mendapatkan elemen yang ingin dihapus
const elementToDelete = document.getElementById("myElement");

// Menghapus elemen dari DOM
elementToDelete.parentNode.removeChild(elementToDelete);

Kode ini akan menghapus elemen dengan ID myElement dari halaman web.

2. Menggunakan remove()

Metode remove() adalah metode yang lebih modern untuk menghapus elemen HTML dari DOM. Metode ini tidak menerima argumen, dan langsung menghapus elemen dari halaman web.

Contoh:

// Mendapatkan elemen yang ingin dihapus
const elementToDelete = document.getElementById("myElement");

// Menghapus elemen dari DOM
elementToDelete.remove();

Kode ini akan menghapus elemen dengan ID myElement dari halaman web.

3. Menggunakan innerHTML

Anda juga dapat menggunakan properti innerHTML untuk menghapus elemen HTML dari DOM. Anda dapat mengatur properti innerHTML dari elemen induk menjadi string kosong untuk menghapus semua anak-anaknya.

Contoh:

// Mendapatkan elemen induk
const parentElement = document.getElementById("myParent");

// Menghapus semua anak dari elemen induk
parentElement.innerHTML = "";

Kode ini akan menghapus semua anak dari elemen dengan ID myParent.

Catatan:

  • Pastikan Anda memiliki referensi ke elemen yang ingin Anda hapus sebelum Anda menggunakan salah satu metode ini.
  • Anda dapat menggunakan document.getElementById(), document.querySelector(), atau metode lainnya untuk mendapatkan referensi ke elemen.
  • Metode remove() lebih efisien daripada removeChild().
  • Anda juga dapat menghapus elemen secara dinamis menggunakan JavaScript berdasarkan kejadian atau kondisi tertentu.

Dengan menggunakan metode-metode ini, Anda dapat dengan mudah menghapus elemen HTML dari halaman web Anda menggunakan JavaScript. W3Schools menyediakan tutorial yang lebih detail dan contoh-contoh yang lebih lengkap, jadi pastikan Anda membaca dokumentasi mereka untuk informasi lebih lanjut.

Related Post


Featured Posts