The DOM: Remove children elements

Join the AI Workshop to learn more about AI and how it can be applied to web development. Next cohort February 1st, 2026

The AI-first Web Development BOOTCAMP cohort starts February 24th, 2026. 10 weeks of intensive training and hands-on projects.

Given an item in the DOM, use querySelector() to identify it, like this:

const item = document.querySelector('#itemId')

then, to remove all its children elements, you have a few different solutions.

The fastest way looks like this:

item.innerHTML = ''

Another solution that is suggested is this: create a loop, check if the firstChild property is defined (the element has at least a child) and then remove it:

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

The loop ends when all children are removed.

The first, in most performance benchmarks I checked, looks to be the fastest solution.

Lessons in this unit:

0:	Introduction
1:	The `window` object
2:	The `document` object
3:	Types of nodes
4:	Traversing the DOM
5:	Editing the DOM
6:	Selectors API
7:	DOM Ready
8:	Add a class to an element
9:	Remove a class from an element
10:	Check if element has a class
11:	Change a DOM node value
12:	Loop through DOM elements
13:	Add an image to the DOM
14:	Create a DOM attribute
15:	▶︎ Remove children elements
16:	Replace a DOM element
17:	insertAdjacentHTML
18:	Add click events to a list