为动态添加的同class删除按钮实现对应Card删除功能（JS、jQuery）

你的问题出在事件绑定的时机上：当前代码是直接给页面初始加载时已存在的.delete-button绑定点击事件，但那些随卡片动态生成的按钮，在代码执行时还没被创建，所以事件根本没绑定到这些新按钮上。

修复方案：使用事件委托 #

把点击事件绑定到一个页面初始化时就存在的静态父元素上（比如卡片的容器，或document），利用事件冒泡机制监听动态元素的点击：

// 优先绑定到卡片的直接父容器（如果有），这里用document作为兜底示例
$(document).on('click', '.delete-button', function(e){
    e.preventDefault();
    // 用closest()找到最近的.card元素，比parent()更可靠（避免按钮父级不是card的情况）
    $(this).closest('.card').remove();   
});

关键细节说明 #

• 事件委托的核心逻辑：父元素监听事件，当子元素触发点击时，事件会冒泡到父元素，父元素再判断触发事件的目标是否是.delete-button，这样不管按钮是初始存在还是动态生成的，都能触发删除逻辑。
• 替换parent('div .card')为closest('.card')：parent()仅能查找直接父级元素，而closest()会向上遍历DOM树，找到最近的.card节点，适配更复杂的DOM结构场景。

内容的提问来源于stack exchange，提问作者Abhishek Kumar