jQuery remove error label from HTML block

TheRealPapa

I am trying to have an error label be removed from my html when the field content is changed. It works fine on input and select, but not in input-group. I want one command that will works on all instances of HTML.

I have a JSFIDDLE here of my issue.

My HTML:

<div class="col-xs-12">
  <div class="form-group">
    <select class="form-control error-input" id="cc-exp_month" name="cc-exp_month" autocomplete="cc-exp_month" required="">
      <option value="01">01</option>
      <option value="02">02</option>
      <option value="03">03</option>
      <option value="04">04</option>
      <option value="05">05</option>
      <option value="06">06</option>
      <option value="07">07</option>
      <option value="08">08</option>
      <option value="09">09</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
    </select>
    <label class="error-message">This expiry date is invalid</label>
  </div>
</div>

<div class="col-xs-12">
  <div class="form-group">
    <input type="text" class="form-control cc-name  error-input" placeholder="Card Name" name="cc-name" id="cc-name" autocomplete="cc-name" required="">
    <label class="error-message">This card is invalid</label>
  </div>
</div>

<div class="col-xs-12">
  <div class="form-group">
    <div class="input-group">
      <input type="tel" class="form-control cc-cvv error-input" placeholder="•••" maxlength="4" name="cc-cvv" id="cc-cvv" autocomplete="off" required="" data-numeric="">
      <span class="input-group-addon">
                            <a href="#" id="cvv-popover" data-toggle="popover" data-trigger="hover" title="" data-placement="top" data-original-title="CVV">
                                <i class="icon-help ion-fw"></i>
                            </a>
                        </span>
    </div>
    <label class="error-message">Invalid cvv</label>
  </div>
</div>

My JS to remove error class and label on change:

$('#cc-exp_month').change(function() {
  $('#cc-exp_month').removeClass('error-input');
  $('#cc-exp_month').parent('.form-group').find('label.error-message').remove();
});

$('#cc-name').change(function() {
  $('#cc-name').removeClass('error-input');
  $('#cc-name').parent('.form-group').find('label.error-message').remove();
});

$('#cc-cvv').change(function() {
  $('#cc-cvv').removeClass('error-input');
  $('#cc-cvv').parent('.form-group').next('.error-message').remove();
});

the CVV field looses its class but I cannot delete the error lable below. I am looking to achieve a "generic" jquery chained command that can work on both instances (input and input-group).

Thanks!

denchu

Fiddle

$('input').change(function() {
  $(this).removeClass('error-input');
  $(this).closest('.form-group').find('label.error-message').remove();
});

$('select').change(function() {
  $(this).removeClass('error-input');
  $(this).closest('.form-group').find('label.error-message').remove();
});

Collected from the Internet

Please contact [email protected] to delete if infringement.