向具有相同类名的按钮添加删除按钮功能。(JavaScript，jQuery)

Question

我正在处理一些小的功能，并面临一个关于删除按钮的问题，这些按钮与卡div一起动态添加，并且在每个按钮中具有相同的类名。

关于写作：

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

此代码仅针对第一个卡div按钮运行。

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

下面是用于获取代码清晰图像的JSFiddle链接。

动态含量

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

​

​

如你所见，图像中有两张卡片。所以，点击卡2的删除按钮，就应该删除卡2.。

Answer 1

使用您的Fiddle，请考虑如下：

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中是可用的，因此在不等待文档准备就绪的情况下将事件附加到那里是安全的。