Notice the selector is the same in CSS, representing elements with a
This returns a special kind of array-like object for DOM elements called a NodeList.
What if we wanted to remove all the elements with a
One way is to call
.remove() on each of the elements. To do this, we need to loop over each element.
NodeLists aren't technically arrays, so they don't have a
.forEach() method 😫 but they are iterable, meaning they can be converted to regular arrays 🤓
Here's the syntax for the conversion:
Now we can use
.forEach() to remove each item:
[...window.document.querySelectorAll('.box')].forEach(node => node.remove())
It can be any valid CSS selector, such as
You could also use
.reduce() on a list of DOM elements this way.