title: jQuery - Remove class from all div's except the one I clicked on
body: <p>I have some code working, that toggles the class "active" on and off when you click on a swatch-wrapper div.</p>
  
  <p>However I would only like <strong>one</strong> of these div's to have the active class at a time. Right now I could click them all, and they would all have the active class. I'm not sure how to remove the class from all the other div's except for the one I just clicked on. </p>
  
  <p>I tried to use .parent(), but it didn't seem to work / I don't think I was using it correctly. </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="variation_form_section"&gt;
    &lt;div class="select"&gt;
      &lt;div class="swatch-wrapper"&gt;&lt;/div&gt;
      &lt;div class="swatch-wrapper"&gt;&lt;/div&gt;
      &lt;div class="swatch-wrapper"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function(){
      $(".variation_form_section .select div").each(function() { 
        $(this).click(function() {
          if($(this).hasClass( "active" )){
              $(this).removeClass( "active" );
          }else{
              $(this).addClass( "active" );
          }
        });
      }); 
  });
  &lt;/script&gt;
  </code></pre>