javascript - 使用 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>