Javascript classList.remove not working properly

Question

Check this fiddle: JSFiddle

HTML:

<table class="myTable">
  <tr>
    <th>Some text</th>
    <td class="align">
      <span class=" someStyle">1</span>/<span class="otherStyle">15</span>
    </td>
    <th>Some text</th>
    <td class="align">
      <span class=" someStyle">2</span>/<span class="otherStyle">16</span>
    </td>
  </tr>
  <tr>
    <th>Some text</th>
    <td class="align">
      <span class="">3</span>/<span class="">17</span>
    </td>
    <th>Some text</th>
    <td class="align">
      <span class="otherStyle">4</span>/<span class=" someStyle">18</span>
    </td>
  </tr>
  <tr>
    <th>Some text</th>
    <td class="align">
      <span class="otherStyle">5</span>/<span class=" someStyle">19</span>
    </td>
    <th>Some text</th>
    <td class="align">
      <span class="">6</span>/<span class="">20</span>
    </td>
  </tr>
  <tr>
    <th>Some text</th>
    <td class="align">
      <span class="">7</span>/<span class="">21</span>
    </td>
    <th>Some text</th>
    <td class="align">
      <span class=" someStyle">8</span>/<span class="otherStyle">22</span>
    </td>
  </tr>
  <tr>
    <th>Some text</th>
    <td class="align">
      <span class="">9</span>/<span class="">23</span>
    </td>
    <th>Some text</th>
    <td class="align">
      <span class="otherStyle">10</span>/<span class=" someStyle">24</span>
    </td>
  </tr>
  <tr>
    <th>Some text</th>
    <td class="align">
      <span class="otherStyle">11</span>/<span class=" someStyle">25</span>
    </td>
    <th>Some text</th>
    <td class="align">
      <span class="otherStyle">12</span>/<span class=" someStyle">26</span>
    </td>
  </tr>
  <tr>
    <th>Some text</th>
    <td class="align">
      <span class=" someStyle">13</span>/<span class="otherStyle">27</span>
    </td>
    <th>Some text</th>
    <td class="align">
      <span class=" someStyle">14</span>/<span class="otherStyle">28</span>
    </td>
  </tr>
</table>

JavaScript:

var myTbl = document.getElementsByClassName("myTable")[0];

var tSomeStyleClasses = myTbl.getElementsByClassName("someStyle");
console.log(tSomeStyleClasses);
for (i=0;i<tSomeStyleClasses.length;i++) {
    console.log(tSomeStyleClasses[i].classList);
    //tSomeStyleClasses[i].classList.remove("someStyle");
}

var tOtherStyleClasses = myTbl.getElementsByClassName("otherStyle");
console.log(tOtherStyleClasses);
for (i=0;i<tOtherStyleClasses.length;i++) {
    console.log(tOtherStyleClasses[i].classList);
    //tOtherStyleClasses[i].classList.remove("otherStyle");
}

And check the console log. There are 10 entries for each, someStyle and otherStyle. Now uncomment //tSomeStyleClasses[i].classList.remove("someStyle"); and //tOtherStyleClasses[i].classList.remove("otherStyle"); and run the fiddle. Check the console log again. 2 x 10 styles should be removed, but instead it removes only 5 styles. I wonder why?

Answer 1

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");
}

Answer 2

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

Answer 3

The easiest method that I've discovered and it works perfectly is using: -someElementToRemoveClassName-.classList.value = ""

It clears off the entire ClassName List and returns it to original state, letting ya guys to re-add the transition class again and makes the transition reappear again as usual.

Answer 4

For those who prefer for loops over while loops and function names like getElementsByTagName over querySelectorAll , you can also use the same function and create the snapshot yourself using Array.from :

Array.from(getElementsByClassName("someStyle"))

or spread syntax:

[...getElementsByClassName("someStyle")]

You would then be able to iterate over this with a for loop of your choice (though remember only some of them work nicely with async / await ).

Note: I couldn't just add this as a comment for lack of rep, but this feels like it could have just been a comment on TJ Crowder's answer.