JQuery 从父项中删除元素

Question

当我的下拉 select 列表中存在插入的值时，我会出现一条 "Try Again!" 消息，这是我的代码：

//I am trying to remove this message once the user starts typing again:

    $('#new_day').on('input', function(){
   //Get input value
   var input_value = $(this).val(); 
   
   //Remove disabled from the button
   $('#new_day_save').removeAttr('disabled'); 
   
   //iterate through the options 
   $(".days > option").each(function() {
      //If the input value match option text the disable button
      if( input_value == $(this).text()){
          $('#new_day_save').attr('disabled', 'disabled');
          $('#new_day_save').parent().append("<p id=\"error_message\" style=\"color: red\">Try again !</p>");
      }else{
         $('#new_day_save').parent().remove("#error_message");
      }
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <select class="days">
      <option>Monday</option>
      <option>Friday</option>
   </select>
   <p>You have another proposition? Add it to the list.</p>
   <div>
       <input id="new_day" type="text" />
   </div>
   <input id="new_day_save" type="button" value="save new day"/>

Answer 1

这一行 $('#new_day_save').parent().remove("#error_message"); 将删除父元素。

要删除 jQuery 中的特定元素，只需这样做，因为它是一个 id 选择器，它是唯一元素，

$("#error_message").remove();

Answer 2

您可以通过在将输入值与选项进行比较之前将其添加到您的事件处理程序来删除 #error_message $('#new_day_save').parent().find('#error_message').remove() 并且您可以删除 else 条件。

 $('#new_day').on('input', function(){
   //Get input value
   var input_value = $(this).val(); 

   //Remove disabled from the button
   $('#new_day_save').removeAttr('disabled'); 
$('#new_day_save').parent().find('#error_message').remove();
   //iterate through the options 
   $(".days > option").each(function() {
  //If the input value match option text the disable button
  if( input_value == $(this).text()){
      $('#new_day_save').attr('disabled', 'disabled');
      $('#new_day_save').parent().append("<p id=\"error_message\" style=\"color: red\">Try again !</p>");
  }
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <select class="days">
  <option>Monday</option>
  <option>Friday</option>
   </select>
   <p>You have another proposition? Add it to the list.</p>
   <div>
   <input id="new_day" type="text" />
   </div>
   <input id="new_day_save" type="button" value="save new day"/>

JQuery 从父项中删除元素

JQuery remove element from parent

javascript

jquery

validation

input

removechild