如何让动态添加的删除按钮仅删除所属的HTML代码块？

场景代码 #

HTML结构：

<div id="box_parent"></div>

动态创建内容的JavaScript代码：

var content = 
'<fieldset>Some Content <input id="delete_row_box" type="button" value="Delete"></fieldset>';
$("#box_parent").append(content);

当前已写出的点击事件框架：

$(document).on("click", '#delete_row_box', function() {
    console.log(this);
});

解决方法 #

首先要修正一个问题：动态创建多个元素时不能使用重复的id（页面中id必须唯一），所以先把删除按钮的id改为class：

1. 修改动态创建的内容代码

var content = 
'<fieldset>Some Content <input class="delete_row_box" type="button" value="Delete"></fieldset>';
$("#box_parent").append(content);

2. 实现删除逻辑

在点击事件中，this指向当前被点击的按钮，通过jQuery的.closest('fieldset')方法找到该按钮所属的最近<fieldset>父元素，再调用.remove()即可删除整个块：

$(document).on("click", '.delete_row_box', function() {
    $(this).closest('fieldset').remove();
});

补充说明：.closest()比.parent()更健壮，如果后续<fieldset>内部结构发生变化（比如按钮被其他标签包裹），.closest()依然能准确找到目标<fieldset>；如果按钮是<fieldset>的直接子元素，用.parent('fieldset').remove()也能实现需求，但.closest()适用性更广。

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