title: How to select all elements and remove a CSS class
body: <p>I have the following JS function which on click is making the chosen element to be selected(is changing the background color) and should make all other elements to remove this class. However, for some reason <code>onClick</code> the &quot;menu-category-hover&quot; class is not removed.</p>
  <pre><code>function GetData(allMenuItems, theCategoryId) {
      
      // Remove selected class on other Elements
      allMenuEl = document.querySelectorAll('menu-category');
      for (var i = 0; i &lt; allMenuEl; i++) {
          allMenuEl[i].classList.remove(&quot;menu-category-hover&quot;);
      }
  
      .....
  
      // On element Click
      var hoverEl = document.getElementById(&quot;menu_cat_&quot; + theCategoryId);
      hoverEl.classList.add(&quot;menu-category-hover&quot;);
  }
  
  &lt;div class=&quot;menu-category menu-category-hover&quot; onclick=&quot;GetData(, 13)&quot; id=&quot;menu_cat_13&quot;&gt;
       &lt;img src=&quot;/images/85783_burger.png&quot; class=&quot;menu-home-image-img&quot;&gt;
       &lt;p class=&quot;menu-home-name&quot;&gt;Burgers&lt;/p&gt;
  &lt;div&gt;
  </code></pre>