How can I remove all child elements of a DOM node in JavaScript?

Front End Technology Javascript Web Development

Suppose you are building a web app that manages the data of daily tasks, the user inserts the task and a list of tasks gets formed. But at some point in time, the user wants to remove all the tasks from the list and wants to make the list empty. So, as a developer, you should know how to remove all the child elements from the DOM node.

To remove all the elements from the DOM node we have the following approaches.

By iterating the DOM nodes and using the removeChild method.
By Erasing the innerHTML value to a blank string.
By using jQuery’s empty() method.
Using the replaceChildren() method.

By iterating the DOM nodes and using the removeChild Method

In this method, we will iterate the DOM using the while loop or for loop. At every iteration, we will check if there is an element remaining in the node using the nodeObject.hasChildNodes() method or nodeObject.childElementCount property, If there is any element present in the node we simple remove that using the nodeObject.removeChild() Method and pass the first node as an argument.

Syntax

parentElement.hasChildNodes()

parentElement.removeChild(parentElement.firstChild)

Here the parentElement.hasChildNodes() will check if there is any element present in the DOM node or not. The parentElement.removeChild(parentElement.firstChild) remove the first child of the DOM node.

Algorithm

STEP 1 − Iterate over all the DOM nodes. To iterate all the nodes, you could use any loop such as for or while loop.
STEP 2 − At every iteration we checked if there is any child present in the parent or not.
STEP 3 − If there is any child we remove it using the removeChild( ) method.

Example 1

Removing all child elements using reomveChild() method

In the example below, we remove all child elements of a DOM node using removeChild() method. We use while loop to iterate all child nodes. First we check if the child element exists using hasChildNodes() method.

<!DOCTYPE html>
<html>
<head>
   <title>Code Result</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><br>
   <div id="parent" style="border:1px solid; padding: 10px; display: inline;">
   <button id="child">First</button>
   <button id="child">Second</button>
   <button id="child">Third</button>
   <button id="child">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

Removing all child elements using nodeObject.remove() method

In the example below, we remove all child elements of a DOM node using nodeObject.remove()method. We use while loop to iterate all child nodes. First we check if the child element exists using hasChildNodes() 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><br>
   <div id="parent" style="border:1px solid; padding: 10px; display: inline;">
   <button id="child">First</button>
   <button id="child">Second</button>
   <button id="child">Third</button>
   <button id="child">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>

By erasing the innerHTML value:

In this method, we assign a blank string or null to object.innerHTML . Although this approach seems easy, there are some disadvantages too. The first one is, that if there is SVG inside the parent it won’t remove that. The second is, that it is considered very slow because when you assign a null or empty string to innerHTML, the DOM gets removed from the surface but the browser persists the child elements which makes the overall performance slow.

Syntax

parent.innerHTML = null
or
parent.innerHTML = ""

Here the parent is the parent DOM node from which we want to remove the child elements.

Example

<html>
<body>
   <h2>Removing All Child Elements by assigning parent.innerHTML value to null</h2>
   <p> Click "Remove Child" to remove all child button elements. <p>
   <button id="btn">Remove Child</button>
   <br><br><br>
   <div id="parent" style="border:1px solid; padding: 10px; display: inline;">
      <button id="child">First</button>
      <button id="child">Second</button>
      <button id="child">Third</button>
      <button id="child">Fourth</button>
   </div>
   <script>
      let btn = document.getElementById("btn");
      let parent = document.getElementById("parent")
      btn.addEventListener("click", () => {
         parent.innerHTML = null
      });
   </script>
</body>
</html>

By using the jQuery’s empty() Method

The empty() method of jQuery removes all child nodes from a set of matched elements. We select out parent DOM element using and apply the empty() method on it.

Syntax

$(parentNode).empty();

Example

<html>
<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><br>
   <div id="parent" style="border:1px solid; padding: 10px; display: inline;">
      <button id="child">First</button>
      <button id="child">Second</button>
      <button id="child">Third</button>
      <button id="child">Fourth</button>
   </div>
   <script>
      let btn = document.getElementById("btn");
      let parent = document.getElementById("parent")
      btn.addEventListener("click", () => {
         $("#parent").empty()
      });
   </script>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>

By using the replaceChildren() Method

The replaceChildren() method is used to replace the old elements of the DOM node with a newer set of elements. This method takes the node elements as arguments and replaces the DOM elements with the same order as arguments. If you do not enter any argument then it simply replaces the old elements with null, which means the old element gets removed.

Syntax

parentElement.replaceElement();

Here the parentElement is the DOM node from which we want to remove chid elements.

Example

<html>
<body>
   <h2>Removing All Child Elements using replaceElement() Method </h2>
   <p> Click "Remove Child" to remove all child button elements. <p>
   <button id="btn">Remove Child</button>
   <br><br><br>
   <div id="parent" style="border:1px solid; padding: 10px; display: inline;">
      <button id="child">First</button>
      <button id="child">Second</button>
      <button id="child">Third</button>
      <button id="child">Fourth</button>
   </div>
   <script>
      let btn = document.getElementById("btn");
      let parent = document.getElementById("parent")
      btn.addEventListener("click", () => {
         parent.replaceChildren()
      });
   </script>
</body>
</html>

We have discussed four methods to remove all child elements of a DOM node in JavaScript. You can use any of them for your convenience. We recommend you to use the first method or the fourth method. If you are using jQuery then use the third method, we won’t recommend you to use the second method if you are building a complex UI because it makes the web pages slower.