Remove all the child elements of a DOM node in JavaScript
Last Updated :
16 Sep, 2024
In HTML, child elements are nested within parent elements, and there are times when you may need to remove these child elements from the DOM. This can be done using JavaScript DOM methods. In this article, we'll explore two common methods for removing child elements from a DOM node.
Why Remove Child Elements?
Removing child elements is a common task in web development, often needed for:
- Dynamic content updates: Refreshing or replacing parts of a web page without reloading the whole page.
- Cleaning up the DOM: Removing unnecessary elements to improve performance or user experience.
- Interactive features: Managing elements based on user actions, such as clicks or form submissions.
There are so many ways to remove the child elements of a DOM node:
Using removeChild()
We are using the HTML DOM removeChild() method, which will remove a specified child node of the given element. We select an element by the use of the querySelector getting the last element of that selected element and removing that with the help of the removeChild() method.
Example: This example shows the implementation of the above-explained approach.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"
content="ie=edge">
<title>Document</title>
</head>
<body>
<ul>
<li>Get Up in Morning</li>
<li>Do some exercise</li>
<li>Get Ready for school</li>
<li>Study Daily</li>
<li>Do homework</li>
</ul>
<input id="btn" type="button"
value="Remove Childrens">
</body>
<script>
function deleteChild() {
let e = document.querySelector("ul");
//e.firstElementChild can be used.
let child = e.lastElementChild;
while (child) {
e.removeChild(child);
child = e.lastElementChild;
}
}
let btn = document.getElementById(
"btn").onclick = function () {
deleteChild();
}
</script>
</html>
Output:
OutputUsing innerHTML property
We are using HTML DOM innerHTML property that helps us to get the content of the selected elemnet. We are selecting the element that we want to remove and craeting an eventListener of onclick. When the button will be clicked the event will occur and it will remove all the content of that selected element by setting `innerHTML=""`.
Example: This example shows the implementation of the above-explained approach.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"
content="ie=edge">
<title>
Document
</title>
</head>
<body>
<ul>
<li>Get Up in Morning</li>
<li>Do some exercise</li>
<li>Get Ready for school</li>
<li>Study Daily</li>
<li>Do homework</li>
</ul>
<input id="btn" type="button"
value="Remove Childrens">
</body>
<script>
function deleteChild() {
let e = document.querySelector("ul");
e.innerHTML = "";
}
let btn = document.getElementById(
"btn").onclick = function () {
deleteChild();
}
</script>
</html>
Output:
OutputAdditional Tips
- Use removeChild() for Specific Removals: If you need to remove specific elements or dynamically select elements to remove, removeChild() provides precise control.
- Use innerHTML for Clearing All: If you need to clear all children of a node quickly, setting innerHTML to an empty string is efficient and simple.
- Error Handling: Always check if the element exists before trying to remove it to avoid JavaScript errors.
Similar Reads
How to remove a Class name from an Element using JavaScript ? Removing a class name from an HTML element using JavaScript is often used to dynamically modify the styling or behavior of an element based on user interactions, events, or other conditions. The operation can be achieved using classList property, that allows you to add, remove, or toggle classes. Sy
3 min read
How to Get the Child Element of a Parent Using JavaScript? To get a child element of a parent element in JavaScript, you can use several DOM (Document Object Model) methods, such as children, childNodes, querySelector(), or getElementById(). Here are different ways to access child elements based on the situation.1. Using children propertyThe children proper
4 min read
How to Remove a Property from All Objects in an Array in JavaScript? To remove a property from all objects in an array in JavaScript, you can use the forEach() method to iterate over each object in the array and use the delete operator to remove the specified property.Example:JavaScriptconst arrayOfObjects = [ { name: "Alice", age: 25, city: "New York" }, { name: "Bo
2 min read
How to removes all child nodes from all paragraphs in jQuery ? In this article, we will learn how to remove all child nodes from all paragraphs in jQuery. Child nodes are the sub-tags of the paragraph. Here, our task is to remove all the sub-tags from the <p> tag in DOM. We can remove all child nodes from all paragraphs in jQuery by using different method
4 min read
How to remove all rows from a table in JavaScript ? Given an HTML document that contains an HTML table, the task is to remove all rows from the HTML table. Removing all rows is different from removing a few rows. This can be done by using JavaScript. Here we have two Approaches to removing all rows from a table: Table of Content Using remove() metho
2 min read
How to Check if an element is a child of a parent using JavaScript? In this article, we are going to see the methods by which we can Check if an element is a child of a parent using JavaScript. These are the following methods: Table of Content Using the Node.contains() methodLooping through the parents of the given childUsing the hasChildNodes() methodMethod 1: Usin
5 min read