javascript - jQuery hide validation errors on dropdown change -

i have form shows additional fields based on selected option is.

when form validated (with error), error message appears under additional field has been shown. that's expected behaviour.

if select different option, old option input hides (expected) old validation error message remains.

how can hide validation error message?

form code:

<div class="row">   <section class="col col-12">     <label class="label">type</label> <label class="select">       <select id="type" name="type">         <option value="" selected>select cancelation type</option>         <option value="c1">cancel , keep payments</option>         <option value="c2">cancel , issue deposit refund</option>         <option value="c3">cancel , issue partial refund</option>         <option value="c4">cancel , issue full refund</option>         <option value="c5">cancel , add aditional charges</option>       </select>       <i></i>     </label>   </section> </div> <div class="ammount"> <div class="row"> <section class="col col-12">   <label id="ammountt" class="label" style="display:none;">refund ammount</label>   <label class="input" id="ammountl" style="display:none;>     <i class="icon-prepend fa fa-gbp"></i>     <input class="" id="ammount" type="text" pattern="\d+(\.\d{2})?" placeholder="" name="ammount" value="" >   </label>   <label id="aditionalt" class="label" style="display:none;">aditional charge ammount</label>   <label class="input" id="aditionall" style="display:none;>     <i class="icon-prepend fa fa-gbp"></i>     <input class="" id="aditional" type="text" pattern="\d+(\.\d{2})?" placeholder="" name="aditional" value="" ></label>   </section> </div> 

js:

$(document).ready(function() {  $("#type").change(function () {     var choice = jquery(this).val();     if ($(this).val() == 'c3') {         $('#ammountt').show();         $('#ammountl').show();     } else {         $('#ammountt').hide();         $('#ammountl').hide();     }     if ($(this).val() == 'c5') {         $('#aditionalt').show();         $('#aditionall').show();     } else {         $('#aditionalt').hide();         $('#aditionall').hide();     } });   var $cancelbookingform = $("#cancel-booking-form").validate({      // rules form validation     rules : {         name : {             required : true         },         ammount : {             required: true         },         aditional : {             required: true         },     },      // messages form validation     messages : {         name : {             required : 'please select upsell drop down.'         },         ammount : {             required: 'please enter refund ammount.'         },         aditional : {             required: 'please enter aditional charge ammount.'         },     },      // not change code below     errorplacement : function(error, element) {         error.insertafter(element.parent());     } });  }) 

you need find invalid class , remove it

$("#type").change(function () {     var choice = jquery(this).val();     //if want remove them     $(".input em.invalid").remove();      if ($(this).val() == 'c3') {         $('#ammountt,#ammountl').show();     } else {         $('#ammountt,#ammountl').hide();         $('#ammountt,#ammount1').siblings("em.invalid").remove();     }     if ($(this).val() == 'c5') {         $('#aditionalt,#aditionall').show();     } else {         $('#aditionalt,#aditionall').hide();         $('#aditionalt,#aditionall').siblings("em.invalid").remove();     } });