Javascript classList.remove not working properly

The value returned from .getElementsByClassName() is a live NodeList. That it's "live" means that as you change the elements in the list, the list itself automatically updates. Thus, when you remove the class that you used to find the elements, the list gets shorter. Because you're iterating with a numeric index, you end up skipping elements.

A good way to deal with that is to use a simple while loop and operate only on the first element of the list until the list is empty:

var tSomeStyleClasses = myTbl.getElementsByClassName("someStyle");

while (tSomeStyleClasses.length) {
    tSomeStyleClasses[0].classList.remove("someStyle");
}

Because getElementsByClassName gives you a live list of matching elements. When you remove the class from the element at index 0, the list is updated immediately to remove that element from the list and shuffle all the others down. Since you then increment i, the element now at index 0 doesn't get processed.

Either:

  1. Work your way through the list backward, or

  2. Use document.querySelectorAll(".someStyle"), which returns a snapshot list, not a live one