How to Remove All Child Elements Using JavaScript
- Remove All Child Elements Using JavaScript
-
Use the
innerHTMLProperty to Remove All Child Elements in JavaScript -
Use the
textContentProperty to Remove All Child Elements in JavaScript -
Use the
removeChild()Method to Remove All Child Elements in JavaScript -
Use the
remove()Function to Remove All Child Elements in JavaScript -
Use the
replaceChildren()Function to Remove All Child Elements in JavaScript -
Use jQuery’s
empty()Method to Remove All Child Elements in JavaScript
This article aims to learn different ways to remove all child elements using JavaScript.
These various methods include innerHTML, textContent, removeChild(), remove(), replaceChildren(), jQuery’s empty() method and looping to remove child nodes.
Remove All Child Elements Using JavaScript
One of the easiest procedures is the innerHTML property used to set or return the content of an HTML element, while the textContent property sets or gives back the text content of the selected node and its child nodes.
Considering MDN documentation, we can say that textContent is faster than innerHTML because the browser does not invoke the HTML parser and quickly replaces all children.
The remove() function removes a particular element from DOM whereas the removeChild() method removes the child element (a.k.a. child node) from Document Object Model (DOM) and returns the removed element/node. It gives the TypeError if the child is null.
On the other hand, the replaceChildren() function removes all the children of a node; it also sets with a new array of child nodes (if required).
You can find more details about it here.
We have two children/nodes in our HTML startup code; that’s why we used the replaceChildren() function; you can also use the replaceChild() if you want to replace one child node.
The replaceChild() takes the old node you want to replace and the new node. The jQuery’s empty() function removes the content and all child nodes from a particular element.
The HTML Code remains the same (except for the last example, you have to include the jQuery library in the <head> tag), but JavaScript will be changed for each example.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Remove Child Nodes</title>
</head>
<body>
<div id="parentDiv">
<span>
<p>this is a paragraph inside the span tag.</p>
</span>
</div>
<button id="btn" onclick="removeChildElement()">
Remove Child Elements
</button>
</body>
</html>
Use the innerHTML Property to Remove All Child Elements in JavaScript
The following code uses the innerHTML property to remove all child nodes.
function removeChildElement() {
document.getElementById('parentDiv').innerHTML = '';
}
Use the textContent Property to Remove All Child Elements in JavaScript
The code uses the textContent property to remove all child elements.
function removeChildElement() {
document.getElementById('parentDiv').textContent = '';
}
Use the removeChild() Method to Remove All Child Elements in JavaScript
Using the removeChild() with loop function, remove the child nodes. This JavaScript code gets executed if you click on the button whose id’s value is btn.
See the code sample given below.
btn.onclick = () => {
const element = document.getElementById('parentDiv');
while (element.firstChild) {
element.removeChild(element.lastChild);
}
}
Use the remove() Function to Remove All Child Elements in JavaScript
Now, practice the remove() function in the following code.
function removeChildElement() {
const parent = document.getElementById('parentDiv')
while (parent.firstChild) {
parent.firstChild.remove()
}
}
Use the replaceChildren() Function to Remove All Child Elements in JavaScript
It’s time to learn about the replaceChildren() function to remove all child nodes using JavaScript. You can see the code given below.
function removeChildElement() {
var element = document.getElementById('parentDiv');
element.replaceChildren();
}
Use jQuery’s empty() Method to Remove All Child Elements in JavaScript
If you are comfortable with jQuery and looking for the solution, you can use the empty() method.
function removeChildElement() {
$('#parentDiv').empty();
}
Do not forget to include the jQuery library in the HTML code’s <head> tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
