A good[ish] website

Web development blog, loads of UI and JavaScript topics

Remove a class name from multiple elements with pure JavaScript

Filed under: JavaScript— Tagged with: functional, iteration, recursion, DOM

This post examines all the ways multiple DOM elements can be manipulated. That can be done with a while loop or with recursion when using a live HTMLCollection.

A common issue for the commando coder is to manipulate multiple elements, it requires usually a loop, but not necessary if going the purely functional way by using recursion.

Here's the manipulated HTML:

<div class="something active">foo</div>
<div class="something active">bar</div>
<div class="something active">baz</div>
<div class="something active">fooz</div>

<button class="button">Deactivate</button>

We want to remove those .active classes when the "Deactivate" button is clicked.

For loop

First let's use the good old for loop as a starting point.

var els = document.querySelectorAll('')var button = document.querySelector('.button')

button.addEventListener('click', _removeClasses)function _removeClasses() {  for (var i = 0; i < els.length; i++) {

That's not too bad, but we can do better, we can use Document.getElementsByClassName() to fetch the elements. Because: it returns an array-like object that is a live HTMLCollection.

What does that mean actually? The bible says:

An HTMLCollection in the HTML DOM is live; it is automatically updated when the underlying document is changed.

The below while loop will illustrate that better.

While loop

// This gives us a live `HTMLCollection`
var els = document.getElementsByClassName('something active')
var button = document.querySelector('.button')

button.addEventListener('click', _removeClasses)

function _removeClasses() {
  while (els[0]) {


Returns a live HTMLCollection rather than a nodeList.

{' '}

while (els[0])
Goes on as long as there's juice left in the collection.
When a class name is removed, the element is removed from the collection, hence it's "live".

Whenever there is a while loop, recursion can be used instead.

Recursive function

As a reminder: recursion happens when a function calls itself. Here the _removeClasses function calls itself after the if (els[0]) stop condition:

var els = document.getElementsByClassName('something active')
var button = document.querySelector('.button')

button.addEventListener('click', _removeClasses)

function _removeClasses() {
  if (els[0]) _removeClasses()

Every recursive function can be broken into 3 parts:

  1. The business logic: els[0].classList.remove('active')
  2. The stop condition: if (els[0])
  3. The recursion itself: _removeClasses()


JS Bin on


For me this was an eye opener in HTMLCollections. Hope it also helped you, drop a comment if you have something to add.

Comments would go here, but the commenting system isn’t ready yet, sorry. Tweet me @hiljaa if you want to make a correction etc.

  • © 2021 Antti Hiljá
  • About
  • Follow me in Twatter → @hiljaa
  • All rights reserved yadda yadda.
  • I can put just about anything here, no one reads the footer anyways.
  • I love u!