How to Remove All the Child Elements of a DOM Node in JavaScript

There are multiple approaches for removing all the child elements of DOM node using JavaScript.

innerHTML

Clearing <kbd class="highlighted">innerHTML</kbd> is simple, however, it might be unsuitable for high-performance applications as it invokes the browser's HTML parser:

Javascript clearing innerHTML

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
    <style>
      #divId {
        height: 100px;
        width: 200px;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div id="divId">
      <span>Welcome to W3Docs</span>
    </div>
    <button id="buttonId">Remove via innerHTML</button>
    <script>
      document.getElementById("buttonId").addEventListener("click", () => {
        const myNode = document.getElementById("divId");
        myNode.innerHTML = "";
      });
    </script>
  </body>
</html>

Try it Yourself »

textContent

The second approach is clearing <kbd class="highlighted">textContent</kbd>. It is similar to the above method. This method is much faster than innerHTML. Using textContent browsers won't invoke HTML parsers and immediately replace all children of the element with a single #text node:

Javascript clearing textContent

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
    <style>
      #divId {
        height: 100px;
        width: 200px;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div id="divId">
      <span>Welcome to W3Docs</span>
    </div>
    <button id="buttonId">Remove via textContent</button>
    <script>
      document.getElementById("buttonId").addEventListener("click", () => {
        const myNode = document.getElementById("divId");
        myNode.textContent = "";
      });
    </script>
  </body>
</html>

Try it Yourself »

lastChild

This approach repeatedly removes the lastChild while using firstChild as the loop condition. It avoids creating intermediate arrays or strings, which can be more memory-efficient for large DOM trees:

Javascript removing firstChild using lastChild

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
    <style>
      #divId {
        height: 100px;
        width: 200px;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div id="divId">
      <span>Welcome to W3Docs</span>
    </div>
    <button id="buttonId">Remove via lastChild-loop</button>
    <script>
      document.getElementById("buttonId").addEventListener("click", () => {
        const myNode = document.getElementById("divId");
        while(myNode.firstChild) {
          myNode.removeChild(myNode.lastChild);
        }
      });
    </script>
  </body>
</html>

Try it Yourself »

lastElementChild

Looping to remove every lastElementChild preserves all non-Element children (such as #text nodes and ) of the parent (not descendants):

Javascript remove every lastElementChild

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
  </head>
  <body>
    <div id="divId" style="height: 100px; width: 200px; border: 1px solid red;">
      <!-- This comment won't be removed -->
      <span>
        Welcome to W3Docs <!-- This comment WILL be removed -->
      </span>
      <!-- But this one won't. -->
    </div>
    <button id="buttonId">Remove via lastElementChild-loop</button>
    <script>
      document.getElementById("buttonId").addEventListener("click", () => {
        const myNode = document.getElementById("divId");
        while(myNode.lastElementChild) {
          myNode.removeChild(myNode.lastElementChild);
        }
      });
    </script>
  </body>
</html>

Try it Yourself »

replaceChildren() (Modern Approach)

In modern browsers, you can clear all children of a node in a single line using replaceChildren():

myNode.replaceChildren();

This method is clean, readable, and explicitly designed for this purpose.