How to empty the DOM element in JavaScript?

We can remove the children of the DOM element in 4 ways:

• Removing all children
• Setting innerHTML to empty string
• Setting textContent to empty string
• Using replaceChildren method

1. Removing all children

The remove method of the Element can be used to remove an element from the DOM. Using this, we can loop through all the child elements of the parent.

Consider we have a ul with 4 li child

// HTML
<ul id="parent">
  <li> list 1 </li>
  <li> list 2 </li>
  <li> list 3 </li>
  <li> list 4 </li>
</ul>

In JavaScript, remove all the child until parent have no child

// js

function empty(element) {
  while(element.firstElementChild) {
     element.firstElementChild.remove();
  }
}

let parent = document.getElementById("parent");
empty(parent);

The element.firstElementChild will return the first child of the parent. We will remove the firstElementChild of the parent as long as the parent has a child.

2. Setting innerHTML to empty String

By setting an empty string as innerHTML, we can remove all the children of an Element. When we set a value to innerHTML, JavaScript will parse the value using HTMLParser and replace the HTML content as parsed values -- this may cause performance issues.

function empty(element) {
   element.innerHTML = ""; 
}

let parent = document.getElementById("parent");
empty(parent);

3. Setting textContent to empty String

By setting an empty string as textContent, we can remove all the children of an Element. When we set a value to textContent, JavaScript will replace all children of the element with a #text node. This method is considered faster than innerHTML.

function empty(element) {
   element.textContent = ""; 
}

let parent = document.getElementById("parent");
empty(parent);

4. Using replaceChildren method

The replaceChildren method replaces the children of a node with a specified new set of children. If we don't send an argument, this method will remove all the children of the node in which it was called.

function empty(element) {
   element.replaceChildren(); 
}

let parent = document.getElementById("parent");
empty(parent);

Consider Supporting me here