What is the correct way of removing classes from multiple tags in HTML through Javascript

Question

This code works fine:

setTimeout(function(){
    let inactiveClass = document.getElementsByClassName(`nonactive`)
    console.log(inactiveClass)
    inactiveClass[1].classList.remove(`nonactive`)
    inactiveClass[0].classList.remove(`nonactive`)
}, 1000)

But as soon as i alter the last two lines as

setTimeout(function(){
    let inactiveClass = document.getElementsByClassName(`nonactive`)
    console.log(inactiveClass)
    inactiveClass[0].classList.remove(`nonactive`)
    inactiveClass[1].classList.remove(`nonactive`)
}, 1000)

console tells me

script.js:9 Uncaught TypeError: Cannot read property 'classList' of undefined

why is it so?

Answer 1

getElementsByClassName returns a live HTMLCollection of found elements.

Every time you remove one item, the collection is smaller. So when you remove [0] there is no [1] left

so you need to do it reverse, OR use another class that stays OR use a static list like this:

setTimeout(function() {
  [...document.querySelectorAll(`.nonactive`)]
  .forEach(inact => inact.classList.remove(`nonactive`));
}, 1000)

.nonactive {
  color: red;
}

<div class="nonactive">Non active</div>
<div class="nonactive">Non active</div>
<div class="nonactive">Non active</div>
<div class="nonactive">Non active</div>
<div class="nonactive">Non active</div>