How to make error message disappear when Checkbox is Checked

Question

EDIT:

<div class="editor-item">
<label for="Location">Location</label><input class="input-validation-error ui-autocomplete-input" data-jqui-acomp-delay="400" data-jqui-acomp-hiddenvalue="LocationId" data-jqui-acomp-minlength="3" data-jqui-acomp-source="/Loc/Search" data-jqui-type="autocomplete" id="Location" name="Location" type="text" value="123 wrong address" autocomplete="off">
<span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span><span class="field-validation-error" data-valmsg-for="Location" data-valmsg-replace="true">Location not found</span></div>

When the user submit the button I'm checking to see if the location is exists and if not then I'm adding in ModelState.AddmodelError

ModelState.AddModelError((LocationViewModel m) => m.Location, "Location not found");

My question is: When the user clicks on Checkbox Create Location How can I make the error disappear?

 <span id="CreateNLocation"   >
    @Html.LabelFor(model => model.CreateLocation, "Create Location")
    @Html.CheckBoxFor(model => model.CreateLocation)
 </span>

Rendered at run time:

<span id="CreateNLocation" style="">
   <label for="CreateLocation">Create Location</label>
   <input data-val="true" data-val-required="The Create new Location field is required." id="CreateLocation" name="CreateLocation" type="checkbox" value="true">

Answer 1

based on your comments to your question

$('#CreateLocation').change(function(){
  if($(this).prop("checked")) {
    $("span[data-valmsg-for='Location']").hide();
  } else {
    $("span[data-valmsg-for='Location']").show();
  }
});

a fiddle

Answer 2

$('#CreateLocation').click(function() {
    $('.field-validation-error).remove();
});

If I am understanding your question properly, you just want to make the error disappear when checking the checkbox? If so this should work for you.

Edit: Misread the question, I need the markup for the error message (div, span, whatever it be). Whatever the element is, replace the .remove() selector with the right one.

$('#CreateLocation').click(function() {
    $(this).parent(wrapper).find('.field-validation-error').remove();
});

Answer 3

Here is a JS Fiddle example if you want to show/hide it based on if the checkbox has been checked or not.

$('#CreateLocation').click(function() {
   var $checkbox = $('#CreateLocation');
   var $errMsg   = $(this).parents('#parent-example')
                        .find('.field-validation-error');
   $checkbox.prop('checked') ? $errMsg.hide() : $errMsg.show();
});

http://jsfiddle.net/ga7kpn3r/1/