title: Best practice to select an event target with Vanilla JS
body: <h3>Problem:</h3>
  
  <ol>
  <li>Whenever user clicks on column's header in table, a classname <code>.active</code> from all the same <code>table tr th span.sorting</code> shoud have been removed.</li>
  <li>Add a classname <code>.active</code> to the child of currently clicked target element.</li>
  </ol>
  
  <h3>Structure:</h3>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;th&gt;
              &lt;span class="sorting"&gt;&lt;/span&gt;
          &lt;/th&gt;
          &lt;th&gt;
              &lt;span class="sorting"&gt;&lt;/span&gt;
          &lt;/th&gt;
          &lt;th&gt;
              &lt;span class="sorting active"&gt;&lt;/span&gt;
          &lt;/th&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <h3>Solution (already done):</h3>
  
  <ol>
  <li><em>don't know</em></li>
  <li>To add a class to a child of clicked column: <code>trigger.target.children[0].classList.add('active')</code></li>
  </ol>
  
  <p>What is the best way to remove all <code>active</code> classes from <code>&lt;span class="sorting"&gt;</code> whenever I click on the <code>&lt;th&gt;</code> element and assign an <code>active</code> class to currently clicked block?</p>
  
  <p>No jQuery, please.</p>