Unable to remove dynamically inserted elements by LiveValidation plugin

Question

I'm using Live Validation plugin to validate my form. And when the form is submitted, the plugin adds in this line of code after the <input>:

<span class=" LV_validation_message LV_valid">Ok</span>

That's all fine, but when I submit the form, I want to reset the form for the next user. Here's my code:

$('#myForm').on('submit',function(e){
    e.preventDefault();
    var inputsValid = email.form.onsubmit();//apparently this checks that all fields are valid: name, phone, email
    if(inputsValid){
        $(this).remove('.LV_validation_message');
        //do stuff like send data to backend here...
        hideMyForm();
    }
});

As you can see, once I verify that the fields are ok, I will attempt to remove the validated messages by removing elements with the class 'LV_validation_message'. After which, I will hide the form. The next time the next user comes to the page, I will show the form again - only the $(this).remove('.LV_validation_message') line doesn't work, and the second user sees the validation messages stuck there to the form, even though the input fields are reset and are empty.

I started off with $('#myForm').submit, but changed it to $('#myForm').on('submit'), because I know <span class=" LV_validation_message LV_valid">Ok</span> is added dynamically. And I tried using $(this).remove('.LV_validation_message'), $('.LV_validation_message'.remove(), and even $('.LV_validation_message'.html("") - anything to change the elements with LV_validation_message class, but to no avail. These elements just seemed completely outside the control of jQuery.

Can somebody provide me with some hint or idea as to why I simply can't remove these elements? Here's the form in question, just in case:

<form id="myForm" autocomplete="off" class="tcenter">
    <label name="name">Name</label>
    <input id="name" type="text" value="" autocomplete="off"><div class="LV-arrow-left-red">   </div><div class="LV-arrow-left-green"></div><br>
    <label name="phone">Phone</label>
    <input id="phone" type="text" value="" autocomplete="off"><div class="LV-arrow-left-red"></div><div class="LV-arrow-left-green"></div><br>
    <label name="email">Email</label>
    <input id="email" type="text" value="" autocomplete="off"><div class="LV-arrow-left-red"></div><div class="LV-arrow-left-green"></div><br>
    <label><!-- Empty tag; to maintain layout --></label>
    <input class="ui-keyboard-button" type="image" width="297" height="64" alt="Submit">
</form> 

Thanks in advance.

Answer 1

try$('.LV_validation_message').val("")

or the error may be improper closing of input tags,should be

 <input id="name" type="text" value="" autocomplete="off"><div class="LV-arrow-left-red">   </div><div class="LV-arrow-left-green"></div></input>

Answer 2

this seems to work $('.LV_validation_message').remove()

see my fiddle at http://jsfiddle.net/4c8c4/