jQuery - Remove class from all div's except the one I clicked on

Question

I have some code working, that toggles the class "active" on and off when you click on a swatch-wrapper div.

However I would only like one 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.

I tried to use .parent(), but it didn't seem to work / I don't think I was using it correctly.

HTML

<div class="variation_form_section">
  <div class="select">
    <div class="swatch-wrapper"></div>
    <div class="swatch-wrapper"></div>
    <div class="swatch-wrapper"></div>
  </div>
</div>

JS

<script>
$(document).ready(function(){
    $(".variation_form_section .select div").each(function() { 
      $(this).click(function() {
        if($(this).hasClass( "active" )){
            $(this).removeClass( "active" );
        }else{
            $(this).addClass( "active" );
        }
      });
    }); 
});
</script>

Answer 1

You can use not like this:

$(".variation_form_section .select div").click(function() { 
  $(".variation_form_section .select div").not($(this)).removeClass('active');
});

Answer 2

Simply, remove active class from them all and then add active class to the clicked element.

$(document).ready(function(){
    $(".variation_form_section .select div").click(function() { 
      $('.variation_form_section .select div').removeClass('active');
      $(this).addClass('active');
    }); 
});

Demo: http://jsfiddle.net/conm54k2/

Answer 3

You can try with .siblings() http://api.jquery.com/siblings/

$(document).on('ready', function(){
    $(".variation_form_section .select div").on('click', function() { 
        $(this).addClass('active').siblings().removeClass('active');
    }); 
});

demo: http://jsfiddle.net/conm54k2/4/