使用jQuery刪除單擊時的父元素

Question

我在創建動態表單時遇到麻煩，用戶可以在其中添加和刪除文本字段。 添加額外字段的功能可以正常工作，但是刪除該字段似乎無法正常工作。

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

Answer 1

您要在實際創建元素之前添加點擊偵聽器，請使用：

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

請參閱以下示例http://api.jquery.com/on/#entry-examples

Answer 2

嘗試使用這個

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