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 innerHTML is simple, however, it might be unsuitable for high-performance applications as it invokes the browser's HTML parser:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
    <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
    <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>
      buttonId.onclick = () => {
        const myNode = document.getElementById("divId");
        myNode.innerHTML = '';
      }
    </script>
  </body>
</html>

textContent

The second approach is clearing textContent. 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:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
    <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
    <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>
      buttonId.onclick = () => {
        const myNode = document.getElementById("divId");
        myNode.textContent = '';
      }
    </script>
  </body>
</html>

lastChild

Instead of removing firstChild, use lastChild which is faster for removing the last element. The loop will check for firstChild just in case it's faster to check for firstChild than lastChild:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
    <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
    <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>
      buttonId.onclick = () => {
        const myNode = document.getElementById("divId");
        while(myNode.firstChild) {
          myNode.removeChild(myNode.lastChild);
        }
      }
    </script>
  </body>
</html>

lastElementChild

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
    <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
  </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>
      buttonId.onclick = () => {
        const myNode = document.getElementById("divId");
        while(myNode.lastElementChild) {
          myNode.removeChild(myNode.lastElementChild);
        }
      }
    </script>
  </body>
</html>

DOM Nodes

The Document Object Model (DOM) is a way of representing a programming interface for HTML and XML documents. The DOM represents a document illustrated in a logical tree where each branch ends in a node, and each of these nodes contains objects. Each node has the ability to refer to other nodes, children. They also can have their children.