如何向下遍历DOM找到最接近的带指定类名的div元素

问题根因 #

你的代码逻辑错误出现在.div2的选择逻辑上：$('.div').find('.div2').first()是全局选中所有.div容器下的第一个.div2元素，和你点击的cancel按钮没有关联，不管点击哪个位置的cancel，都会固定删除最顶部的第一个.div2，自然无法匹配你要删除点击位置最近.div2的需求。

解决方案 #

从你给出的DOM结构可以看到，每个.div1和对应的.div2是相邻的同级元素，你可以从当前点击的按钮出发，先定位到所属的.div1，再取它的下一个同级.div2即可，修改后的代码如下：

$(document).on("click", ".cancel", function () {
  const currentDiv1 = $(this).closest('.div1');
  // 选中当前div1相邻的下一个div2，精准匹配对应项
  currentDiv1.next('.div2').remove();
  currentDiv1.remove();
});

如果后续结构调整，.div2不一定紧挨着.div1，可以把currentDiv1.next('.div2')替换为currentDiv1.nextAll('.div2').first()，会从当前元素之后的所有同级元素里找第一个.div2，兼容性更强。

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