jQuery поиск элемента по ID, а если существует его удалить

Question

У меня проблема, когда я не могу удалить ошибку msg если она существует;

, если нажать на входе, а затем из или, если не действительный адрес электронной почты показывает ошибку, но нажмите на и снова и повторяет Сообщ ошибки,

, если существует ошибка, я хочу, чтобы удалить его и добавить снова или если существует, чтобы не добавлять снова, пока не будет действительным? есть идеи?

function validEmail(v) { 
 
    var r = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i); 
 
    return (v.match(r) == null) ? false : true; 
 
} 
 
$(document).ready(function() { 
 
    $('input').blur(function() { 
 

 
    var email = $(this).val(); 
 
    var emailError = "<p>The email address in the <b>E-mail</b> field is invalid.</p>"; 
 
    var emailInputId = $(this).attr('id'); 
 
    if ($("#" + emailInputId + "_error_message").length) { 
 
     $("#" + emailInputId + "_error_message").remove(); 
 
    } 
 
    console.log($(emailInputId + "_error_message")); 
 
    if (validEmail(email)) { 
 
     //alert('valid email'); 
 
     /*$.ceAjax('request', fn_url('ac.email'), { 
 
     method: 'post', 
 
     data: { 
 
      'email': email 
 
     }, 
 
     caching: true 
 
     });*/ 
 
     $(this).removeClass('cm-failed-field'); 
 
     $(this).prev().removeClass('cm-failed-label'); 
 
     $(this).next("span").remove(); 
 
    } else { 
 
     $(this).addClass('cm-failed-field'); 
 
     $(this).prev().addClass('cm-failed-label'); 
 
     $(this).after("<span id=" + emailInputId + "_error_message' class='help-inline'><p>" + emailError + "</p></span>"); 
 
    } 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input x-autocompletetype="email" type="text" id="elm_32" name="user_data[email]" size="32" value="" class="ty-input-text cm-skip-avail-switch cm-focus cm-failed-field">

Answer 1

Изменить идентификатор (#) для класса (.)

Идентификатор в HTML документе атрибут однозначно идентифицировать элемент.

JQuery, только получить первый элемент, когда селектор является id (#).

if ($("." + emailInputId + "_error_message").length>0) { 
      $("." + emailInputId + "_error_message").remove(); 
     } 


    $(this).after("<span class=" + emailInputId + "_error_message 
        help-inline' ><p>" + emailError + "</p></span>"); 

function validEmail(v) { 
 
    var r = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i); 
 
    return (v.match(r) == null) ? false : true; 
 
} 
 
$(document).ready(function() { 
 
    $('input').blur(function() { 
 

 
    var email = $(this).val(); 
 
    var emailError = "<p>The email address in the <b>E-mail</b> field is invalid.</p>"; 
 
    var emailInputId = $(this).attr('id'); 
 
    if ($("." + emailInputId + "_error_message").length>0) { 
 
     $("." + emailInputId + "_error_message").remove(); 
 
    } 
 
    if (validEmail(email)) { 
 
     //alert('valid email'); 
 
     /*$.ceAjax('request', fn_url('ac.email'), { 
 
     method: 'post', 
 
     data: { 
 
      'email': email 
 
     }, 
 
     caching: true 
 
     });*/ 
 
     $(this).removeClass('cm-failed-field'); 
 
     $(this).prev().removeClass('cm-failed-label'); 
 
     $(this).next("span").remove(); 
 
    } else { 
 
     $(this).addClass('cm-failed-field'); 
 
     $(this).prev().addClass('cm-failed-label'); 
 
     $(this).after("<span class='" + emailInputId + "_error_message help-inline' ><p>" + emailError + "</p></span>"); 
 
    } 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input x-autocompletetype="email" type="text" id="elm_32" name="user_data[email]" size="32" value="" class="ty-input-text cm-skip-avail-switch cm-focus cm-failed-field">