将删除按钮功能添加到具有相同类名的按钮。（JavaScript，jQuery）答案

【问题标题】：Adding delete button functionality to a button which have same class name. (JavaScript, jQuery)将删除按钮功能添加到具有相同类名的按钮。（JavaScript，jQuery）
【发布时间】：2022-12-01 04:54:42
【问题描述】：

我正在研究小功能并面临有关动态添加的删除按钮的问题卡片分区并在每个按钮中具有相同的类名。

关于写作：

$(".delete-button").on('click', function(e){
    e.preventDefault();
    $(this).parent('div .card').remove();   
});

此代码仅针对第一个运行卡片分区按钮。

而且，点击另一张卡的删除按钮不起作用。

这是 JSFiddle 链接，用于获取我的代码的清晰图像。

Dynamic Content

我希望在单击每张卡片的删除按钮时它应该删除该特定卡片。

如您所见，图像中有两张卡片。所以，在点击卡片 2 的删除按钮时，它应该删除卡二。

【问题讨论】：

第二项是动态添加的吗？
是的，为了显示小型 POC，我生成了第二张卡片并添加了相关图像。
欢迎来到堆栈溢出。请提供minimal reproducible example。您可能已委托给一个非静态元素，需要适当调整您的.on()。

标签： javascript jquery

【解决方案1】：

使用你的小提琴，考虑一下：

https://jsfiddle.net/Twisty/cxtm7uzd/

JavaScript

  $(".main-container").on("click", ".delete-button", function(e) {
    e.preventDefault();
    if (confirm("Are you sure you wish to delete this card?")) {
      $(this).closest(".card").remove();
      itemCounter--;
    }
  });

这会正确地委托事件。

委托的事件处理程序它们的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件处理程序来避免频繁附加和删除事件处理程序的需要。例如，此元素可以是模型-视图-控制器设计中视图的容器元素，或者如果事件处理程序想要监视文档中的所有冒泡事件，则为document。在加载任何其他 HTML 之前，document 元素在文档的 head 中可用，因此无需等待文档准备就绪即可安全地在此处附加事件。

【讨论】：