title: Javascript classList.remove not working properly
body: <p>Check this fiddle: <a href="https://jsfiddle.net/oq26wfer/" rel="noreferrer">JSFiddle</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table class="myTable"&gt;
    &lt;tr&gt;
      &lt;th&gt;Some text&lt;/th&gt;
      &lt;td class="align"&gt;
        &lt;span class=" someStyle"&gt;1&lt;/span&gt;/&lt;span class="otherStyle"&gt;15&lt;/span&gt;
      &lt;/td&gt;
      &lt;th&gt;Some text&lt;/th&gt;
      &lt;td class="align"&gt;
        &lt;span class=" someStyle"&gt;2&lt;/span&gt;/&lt;span class="otherStyle"&gt;16&lt;/span&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;Some text&lt;/th&gt;
      &lt;td class="align"&gt;
        &lt;span class=""&gt;3&lt;/span&gt;/&lt;span class=""&gt;17&lt;/span&gt;
      &lt;/td&gt;
      &lt;th&gt;Some text&lt;/th&gt;
      &lt;td class="align"&gt;
        &lt;span class="otherStyle"&gt;4&lt;/span&gt;/&lt;span class=" someStyle"&gt;18&lt;/span&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;Some text&lt;/th&gt;
      &lt;td class="align"&gt;
        &lt;span class="otherStyle"&gt;5&lt;/span&gt;/&lt;span class=" someStyle"&gt;19&lt;/span&gt;
      &lt;/td&gt;
      &lt;th&gt;Some text&lt;/th&gt;
      &lt;td class="align"&gt;
        &lt;span class=""&gt;6&lt;/span&gt;/&lt;span class=""&gt;20&lt;/span&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;Some text&lt;/th&gt;
      &lt;td class="align"&gt;
        &lt;span class=""&gt;7&lt;/span&gt;/&lt;span class=""&gt;21&lt;/span&gt;
      &lt;/td&gt;
      &lt;th&gt;Some text&lt;/th&gt;
      &lt;td class="align"&gt;
        &lt;span class=" someStyle"&gt;8&lt;/span&gt;/&lt;span class="otherStyle"&gt;22&lt;/span&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;Some text&lt;/th&gt;
      &lt;td class="align"&gt;
        &lt;span class=""&gt;9&lt;/span&gt;/&lt;span class=""&gt;23&lt;/span&gt;
      &lt;/td&gt;
      &lt;th&gt;Some text&lt;/th&gt;
      &lt;td class="align"&gt;
        &lt;span class="otherStyle"&gt;10&lt;/span&gt;/&lt;span class=" someStyle"&gt;24&lt;/span&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;Some text&lt;/th&gt;
      &lt;td class="align"&gt;
        &lt;span class="otherStyle"&gt;11&lt;/span&gt;/&lt;span class=" someStyle"&gt;25&lt;/span&gt;
      &lt;/td&gt;
      &lt;th&gt;Some text&lt;/th&gt;
      &lt;td class="align"&gt;
        &lt;span class="otherStyle"&gt;12&lt;/span&gt;/&lt;span class=" someStyle"&gt;26&lt;/span&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;Some text&lt;/th&gt;
      &lt;td class="align"&gt;
        &lt;span class=" someStyle"&gt;13&lt;/span&gt;/&lt;span class="otherStyle"&gt;27&lt;/span&gt;
      &lt;/td&gt;
      &lt;th&gt;Some text&lt;/th&gt;
      &lt;td class="align"&gt;
        &lt;span class=" someStyle"&gt;14&lt;/span&gt;/&lt;span class="otherStyle"&gt;28&lt;/span&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>var myTbl = document.getElementsByClassName("myTable")[0];
  
  var tSomeStyleClasses = myTbl.getElementsByClassName("someStyle");
  console.log(tSomeStyleClasses);
  for (i=0;i&lt;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&lt;tOtherStyleClasses.length;i++) {
      console.log(tOtherStyleClasses[i].classList);
      //tOtherStyleClasses[i].classList.remove("otherStyle");
  }
  </code></pre>
  
  <p>And check the console log. There are 10 entries for each, someStyle and otherStyle. Now uncomment <code>//tSomeStyleClasses[i].classList.remove("someStyle");</code> and <code>//tOtherStyleClasses[i].classList.remove("otherStyle");</code> 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?</p>