JQuery从父元素中删除元素

Posted 2023-05-09

【中文标题】JQuery从父元素中删除元素

【英文标题】：JQuery remove element from parent

【发布时间】：2018-01-17 07:32:42

【问题描述】：

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

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

【问题讨论】：

您要在哪里删除邮件？ $('#error_message').remove() 之类的东西？

【参考方案1】：

在将输入值与选项进行比较之前，您可以通过将其添加到事件处理程序来删除 #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"/>

【参考方案2】：

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

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

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