This tutorial will explain the methods to remove all child elements of an HTML element using JavaScript.
How to Remove All Child Elements Using JavaScript?
For removing all child elements, use the following JavaScript approaches
- removeChild() method
- innerHTML property
Let’s understand the working of these approaches individually.
Method 1: Remove All Child Elements Using the removeChild() Method
The “removeChild()” method is the most common JavaScript method for removing the child elements of the DOM elements. Iterate the DOM elements with a while or a for a loop. On each iteration, it checks to see whether there is any child node left in the element and if so, it simply removes it.
Syntax
Follow the below-mentioned syntax for the removeChild() method to remove child elements of any HTML element:
Here, “child” is the child node of the element to be removed.
Example
First, create an unordered list in an HTML file using the HTML <ul> tag, the list items <li> are the child elements of the unordered list. Then, create a button by attaching an “onclick” event to it, which will trigger a function to remove the child nodes of the element “ul”:
<ul class="ul" style="text-align:center;">
<li>OOP</li>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul> <br>
<button onclick = removeChildElements()>Remove child elements of Unordered list</button>
</div>
To style the unordered list, the following CSS code is used:
display: inline-block;
text-align: left;
}
The HTML page will look like:
In the JavaScript file, use the following code for removing all child nodes of the element:
var childElements = document.querySelector("ul");
var delChild = childElements.lastChild;
while (delChild) {
childElements.removeChild(delChild);
delChild = childElements.lastChild;
}
}
In the above code:
- First, define a function “removeChildElements()”.
- Get the HTML element “ul” using the “querySelector()” method.
- Iterate the element until the last child node, then remove all of them using the “removeChild()” method.
Output
The above output indicates that all items in the list are being deleted successfully when the button is clicked.
For removing, only the first child node of the element, use the below lines of code:
var childElements = document.querySelector("ul");
childElements.removeChild(childElements.firstChild);
}
In the above code snippet
- Get the HTML element “ul” and pass the first child node to the “removeChild()” method as an argument.
Output
The unordered list’s first child element is the only one removed in the output seen above.
Method 2: Remove All Child Elements Using the innerHTML Property
Another approach for removing all child nodes of any element is the “innerHTML” property.
Syntax
The following syntax is used for the innerHTML property:
The empty string is set to the innerHTML property that will remove all the element’s child nodes.
Example
The below-given code is used for removing child nodes using the innerHTML property:
var childElements = document.querySelector("ul");
childElements.innerHTML = "";
}
Output
We gathered the best possible approaches for removing an element’s child nodes using JavaScript.
Conclusion
To remove all child elements of a DOM element, use the “removeChild()” method or the “innerHTML” property. The removeChild() method is an effective and commonly used method for removing the element’s child node. The innerHTML property is the simplest technique. However, it shows that the items are removed, but the nodes remain inside, slowing things down. This tutorial explained the methods for removing all child elements of an HTML element through JavaScript.
