How to remove all children from a DOM element

Learning JavaScript? Download my free JavaScript Handbook 🔥

---

Given an item in the DOM, use querySelector() to identify it, using any CSS selector you want.

In a loop, you basically check if the firstChild property is defined (the element has at least a child) and you remove it.

The loop ends when all children are removed:

const item = document.querySelector('#itemId')
while (item.firstChild) {
  item.removeChild(item.firstChild)
}

Edit this page

---

Here's my latest YouTube video. I talk about work/life balance as a developer: