Javascript 使用jquery删除动态创建的元素（使用单独的删除按钮）

我试图删除动态创建的元素，每个元素都有自己的删除按钮。单击某个元素的“删除”按钮时，我希望删除该特定元素

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

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

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

以下是我尝试删除它的方式：

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

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

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

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

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

---

我对jQuery还比较陌生，这让我很头疼。如果有人能帮我，我将不胜感激

您可以使用类和命令

.nextest（“选择器”）

将其向上移动到DOM树中，直到找到与该选择器匹配的第一个元素，然后您可以删除它

您不应该动态添加

id

，除非您添加的索引是唯一的

---

演示

//单击添加按钮添加新项目
$（“#addsItem”）。单击（函数（事件）{
//停止提交表格-如果您将表格从表格中取出，则无需提交
event.preventDefault（）；
//附加新表单项
$（“#holdsitems”）.append（'Delete'）；
});
//将动态单击事件添加到class.deleteItem
$（文档）。在（“单击“，”.deleteItem”，函数（）上{
//向上移动DOM树，直到第一次出现.item包装并移除
$（this）.closest（“.item wrapper”）.remove（）；
});

添加项
删除
单个文档中的重复ID是无效的HTML-最好解决此问题first@Mohamed-Yousef你能把你的评论变成一个答案吗？@twoleggedhorse我发布了答案：-）。。我发布我的答案是为了让你理解我的评论。。但奥利弗的解释很好。。所以，虽然它与我的答案相同，但我将删除我的答案，您仍然可以查看它：-）。。祝你度过愉快的一天：-）今天第二次给你+1。。我不会再删除任何内容：-）