Pada artikel ini kita akan membahas cara menghapus simpul anak dari elemen tertentu dalam JavaScript dengan contoh yang sesuai
Untuk menghapus simpul anak dari elemen tertentu, ada metode yang sudah ada di JavaScript yang disebut removeChild()
Metode removeChild() berbeda dengan metode remove(). Metode remove() membantu kita menghapus dirinya sendiri. Sedangkan dengan bantuan metode removeChild() , kita dapat menghapus simpul anak dari simpul induk
Sekarang, mari kita lihat sintaks dan penggunaan properti removeChild()
Sintaksis
Sintaks untuk metode removeChild() adalah −
removeChild(childNode);Dimana, childNode adalah node yang akan dihapus. Node yang dihapus dikembalikan
Contoh 1
Ini adalah contoh program untuk menghapus semua node dalam daftar menggunakan metode removeChild() di mana elemen terakhir dari daftar dihapus setiap kali sampai daftar kosong
Pada artikel ini, kami ingin menghitung berbagai cara untuk menghapus semua elemen turunan menggunakan JavaScript
Solusi cepat
const element = document.querySelector('#element'); while(element.lastChild) { element.removeChild(element.lastChild); }_atau
const element = document.querySelector('#element'); element.innerHTML = '';Catatan. Solusi ini tidak dianjurkan
atau
$('#element').empty(); // with jQuery
Penjelasan
DOM disusun dengan node yang memiliki tipe berbeda. Elemen adalah salah satu jenis node yang dapat memuat berbagai node di dalamnya. Penting untuk membagi masalah menghapus konten untuk menghapus node dan menghapus elemen. Lebih sering perlu untuk menghapus semua node. Dalam posting ini berbagai cara cara menghapus konten mulai dari penghapusan node dijelaskan (poin 1-7)
1. const element = document.querySelector('#element'); element.innerHTML = '';2 contoh metode
Untuk menggunakan pendekatan ini diperlukan elemen induk yang dapat diambil dengan properti const element = document.querySelector('#element'); element.innerHTML = '';3. Untuk menghapus elemen const element = document.querySelector('#element'); element.innerHTML = '';2 atau const element = document.querySelector('#element'); element.innerHTML = '';5 metode berguna. Yang kedua tidak didukung oleh browser lama
Anda dapat menggunakan rantai opsional (?. ) operator untuk menghindari kesalahan jika elemen tidak ada
const element = document.getElementById('box'); element?.remove(); _
Jika variabel const element = document.getElementById('box'); element.remove(); _5 menyimpan nilai const element = document.getElementById('box'); element.remove(); 4 atau const element = document.getElementById('box'); element.remove(); 7, operator rangkaian opsional akan melakukan hubung singkat alih-alih memanggil metode remove()
Langkah terakhir adalah menggunakan Elemen. metode remove() untuk menghapus elemen dari DOM
Perhatikan bahwa menghapus elemen juga akan menghapus anak-anaknya
Hapus elemen DOM dengan ID tanpa menghapus turunannya
Jika Anda perlu menghapus elemen tanpa menghapus turunannya, gunakan pendekatan ini
Dan inilah kode JavaScript terkait
const element = document.getElementById('parent'); element.replaceWith(...element.childNodes);
Untuk menghapus elemen tanpa menghapus anak-anaknya, pada dasarnya kita mengganti elemen tersebut dengan anak-anaknya
Kode dalam contoh hanya menghapus elemen const element = document.getElementById('box'); element.remove(); _9 dengan id dari const element = document.getElementById('box'); element?.remove(); 1, tanpa menghapus elemen const element = document.getElementById('box'); element?.remove(); 2 yang terletak di dalam const element = document.getElementById('box'); element.remove(); 9
Jika Anda perlu menangani skenario di mana elemen tidak ada, gunakan operator rangkaian opsional (?. )
Hapus semua elemen turunan dari simpul DOM di JavaScript
Meningkatkan Artikel
Simpan Artikel
Seperti Artikel
- Terakhir Diperbarui. 16 April 2019
Meningkatkan Artikel
Simpan Artikel
Node anak dapat dihapus dari induk dengan removeChild(), dan node itu sendiri dapat dihapus dengan remove()
Metode lain untuk menghapus semua anak dari sebuah node adalah dengan menyetel properti innerHTML="", itu adalah string kosong yang menghasilkan keluaran yang sama. Metode ini tidak disukai untuk digunakan
Contoh 1. Menggunakan "removeChild()"
<!DOCTYPE html>
<html lang="en">
<head>
________20______1<<3 <4=<6>
________20______1<<3 html1=html3
________21______4html5html6=html8html9
________22______0lang1=lang3lang4
________20______1<<3 lang8==0
________21______4=2==4>
=_6
________20______1<=9"en"0=9>
"en"3head>
<"en"8>
________20______1<>2>
________25______4<>6>7>6>
>4<>6 3>6>
>4<>6 9>6>
________25______4<>6<5>6>
>4<>6head1>6>
________20______1"en"3>2>
________20______1<<00 <01=<03
________20______04<05=<07
________20______04<09=<11>
"en"3"en"8>
<<17>
<1<20
________25const element = document.querySelector('#element'); element.innerHTML = '';_20_______22
<23
________25const element = document.querySelector('#element'); element.innerHTML = '';_20_______25
________25const element = document.querySelector('#element'); element.innerHTML = '';_20_______27
________25const element = document.querySelector('#element'); element.innerHTML = '';_20_______29
________20______30<31
<30<33
________25const element = document.querySelector('#element'); element.innerHTML = '';_20_______35
<1<35
<1<39
<1<41
________25const element = document.querySelector('#element'); element.innerHTML = '';_20_______43
<1<35
"en"3<17>
"en"3html>
Keluaran
Sebelum Mengklik Tombol
Setelah Mengklik Tombol
Contoh-2. Menggunakan properti innerHTML=""
<!DOCTYPE html>
<html lang="en">
<head>
________20______1<<3 <4=<6>
________20______1<<3 html1=html3
________21______4html5html6=html8html9
________22______0lang1=lang3lang4
________20______1<<3 lang8==0
________21______4=2==4>
________20______1<=9>
html03html04
________21______05"en"3=9>
"en"3head>
<"en"8>
________20______1<>2>
________25______4<>6>7>6>
>4<>6 3>6>
>4<>6 9>6>
________25______4<>6<5>6>
>4<>6head1>6>
________20______1"en"3>2>
________20______1<<00 <01=<03
________20______04<05=<07
________20______04<09=<11>
"en"3"en"8>
<<17>
<1<20
________25const element = document.querySelector('#element'); element.innerHTML = '';_20_______22
________25const element = document.querySelector('#element'); element.innerHTML = '';_21_______80
<1<35
<1<39
html03<41
________25const element = document.querySelector('#element'); element.innerHTML = '';_20_______43
<1<35
"en"3<17>
"en"3html>
Keluaran
Sebelum Mengklik Tombol
Setelah Mengklik Tombol
Contoh-3 Menggunakan “removeChild()”
<!DOCTYPE html>
<html lang="en">
<head>
________20______1<<3 <4=<6>
________20______1<<3 html1=html3
________21______4html5html6=html8html9
________22______0lang1=lang3lang4
________20______1<<3 lang8==0
________21______4=2==4>
________20______1<=9"en"0=9>
"en"3head>
<"en"8>
________20______1<>2>
________25______4<>6>7>6>
>4<>6 3>6>
>4<>6 9>6>
________25______4<>6<5>6>
>4<>6head1>6>
________20______1"en"3>2>
________20______1<<00 <01=<03
________20______04<05=<07
________20______04<09=<11>
"en"3"en"8>
<<17>
<1<20
________25const element = document.querySelector('#element'); element.innerHTML = '';_20_______22
________25const element = document.querySelector('#element'); element.innerHTML = '';_23______21
________25const element = document.querySelector('#element'); element.innerHTML = '';_23_______23
<30=25
<30=27
________25const element = document.querySelector('#element'); element.innerHTML = '';_20_______35
<1<35
<1<39
html03<41
________25const element = document.querySelector('#element'); element.innerHTML = '';_20_______43
<1<35
"en"3<17>
"en"3html>
Keluaran
Sebelum Mengklik Tombol
Setelah Mengklik Tombol
Catatan Pribadi Saya arrow_drop_up
Menyimpan