title: How to remove the class after clicking three div?
body: <p>I have 9 div . I will add the "active" class when i click each div. I need to remove that "active" class when i click any of the div as fourth </p>
  
  <pre><code> &lt;section class="square_box tctgrid" id="question1"&gt;
     &lt;div&gt;&lt;/div&gt;
     &lt;div&gt;&lt;/div&gt;
     &lt;div&gt;&lt;/div&gt;
     &lt;div class="empty"&gt;&lt;input type="radio" value="1" class="answer_value"&gt;&lt;/div&gt;
     &lt;div&gt;&lt;/div&gt;
     &lt;div&gt;&lt;/div&gt;
     &lt;div&gt;&lt;/div&gt;
     &lt;div&gt;&lt;/div&gt;
     &lt;div&gt;&lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>    &lt;script&gt;
  $( ".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');;
      }
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>The above code is my script. I don't know how to remove the class.Please help me on this.</p>