Jquery类操作问题：关闭按钮无法移除父元素指定类

问题根源 #

点击carrier-tiers-close-btn时，事件会向上冒泡到父级的customer-row元素，触发了之前绑定的添加类事件——相当于刚把open-carrier-tiers移除，立刻又被加上了，所以看起来没生效。另外parent().parent()的DOM遍历方式不够健壮，一旦DOM结构调整就会失效。

修复方案 #

方案1：阻止事件冒泡 + 精准DOM查找

修改关闭按钮的点击事件，先阻止冒泡，再用closest()精准定位目标元素：

$(".customer-row").click(function () {
    $(this).find("td.carrier-tiers").addClass('open-carrier-tiers');
});

$(".carrier-tiers-close-btn").click(function (event) {
    // 阻止事件冒泡到父级的customer-row
    event.stopPropagation();
    // 查找最近的.carrier-tiers元素，比parent().parent()更可靠
    $(this).closest(".carrier-tiers").removeClass('open-carrier-tiers');
});

方案2：事件委托（推荐，适配多结构/动态元素）

因为页面存在多处重复结构，用事件委托绑定在更高层级（比如包裹这些行的<table>），既能提升性能，也能处理后续动态添加的行：

// 事件委托绑定到table（可根据实际父级结构调整）
$("table").on("click", ".customer-row", function () {
    $(this).find("td.carrier-tiers").addClass('open-carrier-tiers');
});

$("table").on("click", ".carrier-tiers-close-btn", function (event) {
    event.stopPropagation();
    $(this).closest(".carrier-tiers").removeClass('open-carrier-tiers');
});

额外说明 #

• closest()方法会从当前元素开始向上查找，返回第一个匹配选择器的祖先元素，比链式parent()更灵活，DOM结构变动时不容易出错。
• 事件委托的核心是利用事件冒泡，把事件绑定到静态父元素，处理动态生成的子元素事件，适合页面有大量重复结构的场景。

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