Question

我有一个＆＃34;再试一次！＆＃34;当插入的值存在于我的下拉列表选择列表中时出现的消息，这是我的代码：

＆＃13;

//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");
      }
   });
});

＆＃13;

<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"/>

＆＃13;

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() 你可以删除其他条件。

 $('#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从父

2 个答案: