使用jQuery删除动态创建的元素（带有单独的删除按钮）

Question

我正在尝试删除动态创建的元素，每个元素都有自己的删除按钮。 This is the element that gets added with every button click.单击某个元素的删除按钮后，我希望删除该特定元素。

我使用以下代码附加元素：

$("#addsitem").click(function () {
  $("#holdsitems").append('myFunction');
});

这是我尝试将其删除的方法：

$("#item").on("click", "#deleteitem", function() {
    $("#item").remove();
});

我只能删除尚未添加的元素。

这是元素的所有相关HTML代码（myFunction）：

<div id="item" class="itemdiv">
  <form>
    <div>
      <div id="deleteitem">
        <input type="button" name="Delete Button" value="Delete">
      </div>
    </div>
  </form>
</div>

我对jQuery很陌生，这让我头疼。如果有人可以帮助我，将不胜感激！

Answer 1

您可以使用类和命令.closest("selector")，其中该命令将在DOM树上移动，直到找到与该选择器匹配的第一个元素，然后可以将其删除。

除非您要添加索引以使其唯一，否则不应动态添加id。

---

演示

// Add new item on click of add button
$("#addsItem").click(function(event) {

  // Stop submission of form - this is not necessary if you take it out of the form
  event.preventDefault();

  // Append new form item
  $("#holdsitems").append('<div class="item-wrapper"><button type="button" class="deleteItem" >Delete</button></div>');
  
});


// Add DYNAMIC click event to class .deleteItem
$(document).on("click", ".deleteItem", function() {

  // Move up DOM tree until first incidence of .item-wrapper and remove
  $(this).closest(".item-wrapper").remove();
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="item" class="itemdiv">
  <form>
    <div id="holdsitems">
      <button id="addsItem">Add Item</button>
      <div class="item-wrapper">
        <button type="button" class="deleteItem">Delete</button>
      </div>
    </div>
  </form>
</div>