使用 jQuery 在单击时删除父元素

Posted 2023-05-09

【中文标题】使用 jQuery 在单击时删除父元素

【英文标题】：Removing a parent element on click using jQuery

【发布时间】：2016-09-15 11:46:57

【问题描述】：

我在创建用户可以添加和删除文本字段的动态表单时遇到问题。添加额外字段的功能可以正常工作，但删除字段似乎无法正常工作。

我的html是：

<div class="formItem" id="members">
  <label for="workgroup">Add Members:</label>
  <br />
  <a href="#" id="addMember">Add another member</a>
  <p>
    <input type="text" name="members[]" placeholder="Enter email" autocomplete="off" />
  </p>
</div>

我的 JS：

$('#addMember').on('click', function() 
  $('<p><input type="text" name="members[]" placeholder="Enter email" autocomplete="off" /><a href="#" id="removeMember">Remove</a></p>').appendTo('#members');
  return false;
);

$('#removeMember').on('click', function() 
  $(this).parent().remove();
);

【参考方案1】：

在实际创建元素之前添加点击监听器，使用：

$('#members').on('click', '#removeMember', function() 
  $(this).parent().remove();
);

查看这些示例http://api.jquery.com/on/#entry-examples

【参考方案2】：

试试这个

$(document).on('click','#removeMember', function() 
    $(this).parent().remove();
);