Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How can I remove all child elements of a DOM node in JavaScript?
When building web applications, you often need to clear dynamic content like task lists, shopping carts, or search results. JavaScript provides several methods to remove all child elements from a DOM node efficiently.
Here are the main approaches to remove all child elements:
- Using the removeChild() method with iteration
- Setting innerHTML to an empty string
- Using jQuery's empty() method
- Using the modern replaceChildren() method
Using removeChild() Method with Iteration
This method iterates through all child nodes and removes them one by one using removeChild(). It's reliable and works across all browsers.
Syntax
while (parentElement.hasChildNodes()) {
parentElement.removeChild(parentElement.firstChild);
}
Example 1: Using removeChild()
<!DOCTYPE html>
<html>
<head>
<title>Remove Child Elements</title>
</head>
<body>
<h2>Removing All Child Elements using removeChild() Method</h2>
<p>Click "Remove Child" to remove all child button elements.</p>
<button id="btn">Remove Child</button>
<br><br>
<div id="parent" style="border:1px solid; padding: 10px; display: inline;">
<button>First</button>
<button>Second</button>
<button>Third</button>
<button>Fourth</button>
</div>
<script>
let btn = document.getElementById("btn");
let parent = document.getElementById("parent");
btn.addEventListener("click", () => {
while (parent.hasChildNodes()) {
parent.removeChild(parent.firstChild);
}
});
</script>
</body>
</html>
Example 2: Using remove() Method
<!DOCTYPE html>
<html>
<body>
<h2>Removing All Child Elements using remove() Method</h2>
<p>Click "Remove Child" to remove all child button elements.</p>
<button id="btn">Remove Child</button>
<br><br>
<div id="parent" style="border:1px solid; padding: 10px; display: inline;">
<button>First</button>
<button>Second</button>
<button>Third</button>
<button>Fourth</button>
</div>
<script>
let btn = document.getElementById("btn");
let parent = document.getElementById("parent");
btn.addEventListener("click", () => {
while (parent.hasChildNodes()) {
parent.firstChild.remove();
}
});
</script>
</body>
</html>
Using innerHTML Property
Setting innerHTML to an empty string is simple but has performance drawbacks. It's slower for complex DOM structures and may not properly clean up event listeners.
Syntax
parentElement.innerHTML = ""; // or parentElement.innerHTML = null;
Example
<!DOCTYPE html>
<html>
<body>
<h2>Removing All Child Elements by Setting innerHTML</h2>
<p>Click "Remove Child" to remove all child button elements.</p>
<button id="btn">Remove Child</button>
<br><br>
<div id="parent" style="border:1px solid; padding: 10px; display: inline;">
<button>First</button>
<button>Second</button>
<button>Third</button>
<button>Fourth</button>
</div>
<script>
let btn = document.getElementById("btn");
let parent = document.getElementById("parent");
btn.addEventListener("click", () => {
parent.innerHTML = "";
});
</script>
</body>
</html>
Using jQuery's empty() Method
If you're using jQuery, the empty() method provides a clean way to remove all child elements and properly handles event cleanup.
Syntax
$(parentElement).empty();
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h2>Removing All Child Elements using jQuery's empty() Method</h2>
<p>Click "Remove Child" to remove all child button elements.</p>
<button id="btn">Remove Child</button>
<br><br>
<div id="parent" style="border:1px solid; padding: 10px; display: inline;">
<button>First</button>
<button>Second</button>
<button>Third</button>
<button>Fourth</button>
</div>
<script>
$("#btn").click(function() {
$("#parent").empty();
});
</script>
</body>
</html>
Using replaceChildren() Method
The modern replaceChildren() method is the cleanest approach. When called without arguments, it removes all child elements efficiently.
Syntax
parentElement.replaceChildren();
Example
<!DOCTYPE html>
<html>
<body>
<h2>Removing All Child Elements using replaceChildren() Method</h2>
<p>Click "Remove Child" to remove all child button elements.</p>
<button id="btn">Remove Child</button>
<br><br>
<div id="parent" style="border:1px solid; padding: 10px; display: inline;">
<button>First</button>
<button>Second</button>
<button>Third</button>
<button>Fourth</button>
</div>
<script>
let btn = document.getElementById("btn");
let parent = document.getElementById("parent");
btn.addEventListener("click", () => {
parent.replaceChildren();
});
</script>
</body>
</html>
Comparison of Methods
| Method | Performance | Browser Support | Event Cleanup |
|---|---|---|---|
| removeChild() | Good | Excellent | Manual |
| innerHTML = "" | Poor | Excellent | Automatic |
| jQuery empty() | Good | Excellent | Automatic |
| replaceChildren() | Excellent | Modern browsers | Automatic |
Conclusion
For modern applications, use replaceChildren() for the best performance. For broader browser support, removeChild() with iteration remains reliable. Avoid innerHTML = "" for complex applications due to performance issues.
14K+ Views
