title: removeClass("has-error") when field was changed Bootstrap, javascript
body: <h3>My Javascript</h3>
  
  <pre><code>$('.input-group').each(function() {
  $mainElement = $(this);
  $sibling = $mainElement.next('.form-control');
  $sibling.change(function($mainElement) {
      return function() {
          $mainElement.removeClass('has-error');        
      }
  }($mainElement)); });
  </code></pre>
  
  <h3>My Form</h3>
  
  <pre><code>&lt;div class="form-group"&gt;
      &lt;label&gt;Organization&lt;/label&gt;
      &lt;div class="input-group has-error"&gt;
          &lt;input type="text" class="form-control" name="organization" /&gt;
          &lt;!--added code--&gt;
          &lt;span class="input-group-addon"&gt;&lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="form-group"&gt;
      &lt;label&gt;Address&lt;/label&gt;
      &lt;div class="input-group has-error"&gt;
          &lt;input type="text" class="form-control" name="address" /&gt;
          &lt;!--added code--&gt;
          &lt;span class="input-group-addon"&gt;&lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The idea came from <a href="http://jsfiddle.net/WCDBr/" rel="nofollow noreferrer">here</a> after I try one of <code>.each()</code> solution <a href="https://stackoverflow.com/questions/14910100/change-inside-each-jquery">here</a>   </p>
  
  <p>I used twitter bootstrap for this for showing <code>.has-error</code> class after PHP back-end validation which I PREFERRED. Now I want to remove <code>.each()</code>  <code>.has-error</code> classes for any changes happened in those <code>.form-control</code> under those <code>.input-group</code>.</p>
  
  <p>Take note... I do not want to use the jQuery validation here. </p>
  
  <p>Someone provided the BEST ANSWER here with a link below:</p>
  
  <p><a href="https://www.jsnippet.net/snippet/324/remove-class-haserror-when-field-was-changed" rel="nofollow noreferrer">https://www.jsnippet.net/snippet/324/remove-class-haserror-when-field-was-changed</a></p>
  
  <p>and I revised it like this:</p>
  
  <pre><code>$('.input-group').each(function(){
      $(this).find('.form-control').change(function(){
          $(this).closest('div').removeClass('has-error');            
      });
  });
  </code></pre>
  
  <p>now as I revised my code, I added the:
      
          
      </p>
  
  <pre><code>$('.input-group').each(function(){
      $(this).find('.form-control').change(function(){
          $(this).closest('div').removeClass('has-error').closest('span').removeClass('glyphicon-remove');            
      });
  });
  </code></pre>
  
  <p>within the  and same thing I want to remove the glyphicon-remove class like the has-error class once the .form-control field have changed. </p>
  
  <p>I played the code but still the glyphicon-remove class is still there.</p>