Comment supprimer la classe après avoir cliqué sur trois div ?

Question

J'ai 9 div . Je vais ajouter la classe "active" lorsque je clique sur chaque div. J'ai besoin de supprimer cette classe "active" lorsque je clique sur n'importe quelle div comme quatrième.

 <section class="square_box tctgrid" id="question1">
   <div></div>
   <div></div>
   <div></div>
   <div class="empty"><input type="radio" value="1" class="answer_value"></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>

    <script>
$( ".square_box div" ).click(function() {
    if ($(this).hasClass( "empty")) {
        var ans = $(this).find('.answer_value').val();
        $(this).addClass( "active");
    }
    else{
        $(this).addClass( "active").addClass('error_div');;
    }
});
</script>

Le code ci-dessus est mon script. Je ne sais pas comment supprimer la classe, merci de m'aider.

Answer 1

Essayez quelque chose comme ceci :

$(document).ready(function() {
  $("div").each(function() {
     $(this).data('count', 0);
  }
  $("div").click(function() {
    $(this).data('count', ($(this).data('count') +1));
    if($(this).data('count') == 4) {
        $("div").removeClass("active");
        $(this).data('count', 0);
    }
  });
});

Answer 2

Si vous avez bien compris, cela devrait résoudre votre problème.

$( ".square_box div" ).click(function() {
    $(".square_box div .active").removeClass("active");
    //handle the rest of you methods
});

Answer 3

Vous pouvez procéder de la manière suivante

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

div{
  cursor:pointer
}
.active{
  font-weight:bold
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
   <div>ONE</div>
   <div>TWO</div>
   <div>THREE</div>
   <div>FOUR</div>
   <div>FIVE</div>
   <div>SIX</div>
   <div>SEVEN</div>
   <div>EIGHT</div>