title: Vanilla JS remove class from all other elements besides 'active' class
body: <p>I'm trying to build a dropdown menu with Vanilla JavaScript and I can't figure out the best way to add a class of active to the clicked dropdown menu, and then at the same time remove all other active classes from the sibling elements. </p>
  
  <p>so far this is what I have as far as JS:</p>
  
  <pre><code>var _dropdowns = [].slice.call(document.getElementsByClassName('main-menu-li_dropdown'));
  
              _dropdowns.forEach(function(dropdowns) {
                  dropdowns.addEventListener('click', function( event ){
                      event.preventDefault();
                      console.log(this !== event.target);
                      this.classList.toggle('active');
                  });
              });
  </code></pre>
  
  <p>And here is my markup: </p>
  
  <pre><code>&lt;nav id="main-nav"&gt;
      &lt;ul&gt;
          &lt;li class="main-menu-li_dropdown"&gt;
              &lt;a href=""&gt;link&lt;/a&gt;
              &lt;ul class="sub-nav"&gt;
                  &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="main-menu-li_dropdown"&gt;
              &lt;a href=""&gt;link&lt;/a&gt;
              &lt;ul class="sub-nav"&gt;
                  &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="main-menu-li_dropdown"&gt;
              &lt;a href=""&gt;link&lt;/a&gt;
              &lt;ul class="sub-nav"&gt;
                  &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="main-menu-li_dropdown"&gt;
              &lt;a href=""&gt;link&lt;/a&gt;
              &lt;ul class="sub-nav"&gt;
                  &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="main-menu-li_dropdown"&gt;
              &lt;a href=""&gt;link&lt;/a&gt;
              &lt;ul class="sub-nav"&gt;
                  &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>