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

Removing all child elements from a DOM node is something that we’ve to do sometimes in JavaScript.

In this article, we’ll look at how to remove all child elements of a DOM node with JavaScript.

Clearing innerHTML

One way to remove all child elements of an element is to set the innerHTML property of the element to an empty string.

For example, if we have the following HTML:

<button>
  clear
</button>
<div>
</div>

Then we can write the following JavaScript to add the elements to the div.

And we can clear the items when we click the clear button:

const div = document.querySelector('div')
const button = document.querySelector('button')

for (let i = 1; i <= 100; i++) {
  const p = document.createElement('p')
  p.textContent = 'hello'
  div.appendChild(p)
}

button.addEventListener('click', () => {
  div.innerHTML = ''
})

We get the div and the button with document.querySelector .

Then in the for loop, we create the p elements and add them to the div.

And then we call addEventListener on the button with 'click' as the first argument to add a click listener.

Then in the callback, we set div.innerHTML to an empty string to clear its contents when we click the button.

Clearing textContent

Instead of clearing innerHTML , we can clear textContent instead.

To do this, we write:

const div = document.querySelector('div')
const button = document.querySelector('button')

for (let i = 1; i <= 100; i++) {
  const p = document.createElement('p')
  p.textContent = 'hello'
  div.appendChild(p)
}

button.addEventListener('click', () => {
  div.textContent = ''
})

We just switch innerHTML for textContent .

And the rest of the code is the same.

Looping to Remove every lastChild from the DOM

We can remove all the child elements of an element from the DOM with the removeChild method.

For instance, we can write:

const div = document.querySelector('div')
const button = document.querySelector('button')

for (let i = 1; i <= 100; i++) {
  const p = document.createElement('p')
  p.textContent = 'hello'
  div.appendChild(p)
}

button.addEventListener('click', () => {
  while (div.firstChild) {
    div.removeChild(div.lastChild);
  }
})

We have a while loop inside the click listener.

We check if there’re any firstChild elements within the div with div.firstChild .

If there’re, we call removeChuld to remove div.lastChild until there’re no firstChild left.

Looping to Remove every lastElementChild from the DOM

We can also remove every lastElementChild from an element.

To do this, we write:

const div = document.querySelector('div')
const button = document.querySelector('button')

for (let i = 1; i <= 100; i++) {
  const p = document.createElement('p')
  p.textContent = 'hello'
  div.appendChild(p)
}

button.addEventListener('click', () => {
  while (div.lastElementChild) {
    div.removeChild(div.lastElementChild);
  }
})

lastElementChild returns the last child element of the given element.

We can just call removeChild to remove all of them until there’s nothing left.

Conclusion

We can remove all the child elements of an element easily by setting innerHTML or textContent .

Also, we can remove the child elements one by one with removeChild .