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

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

我的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();
});

$（'addMember'）。在（'click'，function（）上{
$（“
”）。附录（“#成员”）；
返回false；
});
$（'#removeMember'）。在（'单击'，函数（）上）{
$（this.parent（）.remove（）；
});

在实际创建元素之前，如果要添加单击侦听器，请使用：

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

---

参见以下示例

在实际创建元素之前，如果要添加单击侦听器，请使用：

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

查看这些示例

尝试使用此

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

试试这个

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