Remove Child Elements with JavaScript removeChild

01/01/2022
Contents
In this article, you will learn how to remove child elements with JavaScript removeChild.
What is removeChild?
The removeChild() is a Node method that removes the specified child node.
You can delete the specified child node by writing as follows.
let parent = document.getElementById('parent');
parent.removeChild(child);
Remove by specifying the id of the child element
Get the parent element and child element by id and remove only the child element.
HTML
<div id="parent">
<div id="child">Child element</div>
</div>
JavaScript
//Get parent element
let parent = document.getElementById('parent');
//Get child element
let child = document.getElementById('child');
//Remove child element in parent element
parent.removeChild(child);
Remove by specifying the class of the child element
Remove the elements with a specific class.
HTML
<div id="parent">
<div class="child">Child element</div>
<div class="child">Child element</div>
<div class="child">Child element</div>
</div>
JavaScript
//Get parent element
let parent = document.getElementById('parent');
//Get child elements
let children = document.getElementsByClassName('child');
//Get the number of child elements
let len = children.length;
for(let i = 0; i < len; i++){
parent.removeChild(children[0]);
}
Remove all child elements
Remove all child elements that exist within the parent element.
HTML
<div id="parent">
<div class="child">Child element</div>
<div class="child">Child element</div>
<div class="child">Child element</div>
</div>
JavaScript
//Get parent element
let parent = document.getElementById('parent');
while(parent.lastChild){
parent.removeChild(parent.lastChild);
}