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:

Table of Content

Using removeChild()
Using innerHTML property

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:

Output

Using 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:

Output

Additional 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.

How to Linearly Transition the removal of a DOM element using CSS and JavaScript ?

Pankaj_Singh

Improve

Article Tags :

Remove all the child elements of a DOM node in JavaScript

Why Remove Child Elements?

Using removeChild()

Using innerHTML property

Additional Tips

Similar Reads

Thank You!

What kind of Experience do you want to share?