如何移除元素父级的下一个div？DOM操作代码异常求助

我来帮你搞定这个问题！你遇到的核心问题是**nextSibling会选中元素之间的空白文本节点，而非你目标的<div>元素**。

为什么会这样？ #

在HTML解析时，元素之间的换行、空格等空白字符会被DOM解析为文本节点（类型为#text）。当你调用yesicon.closest('button').nextSibling时，拿到的其实是按钮和下一个div之间的空白文本节点，而不是你想移除的那个div——对文本节点调用remove()当然看不出效果，但直接移除按钮本身是有效的，因为closest('button')确实精准定位到了按钮元素。

你可以加一行代码验证这个现象：

console.log(yesicon.closest('button').nextSibling);

输出会是类似#text " "的节点，这就直观说明问题所在了。

修复方案：改用nextElementSibling #

nextElementSibling方法只会返回当前节点的下一个元素类型节点，会自动跳过文本节点、注释节点这类非元素节点。把你的代码改成下面这样就可以正常工作了：

function yes(event, yesicon) {
  event.stopPropagation();
  yesicon.closest('button').nextElementSibling.remove(); // 现在可以正常移除目标div了
  // yesicon.closest('button').remove(); // 如果需要保留按钮，注释掉这行即可
}

额外小提示 #

如果你的HTML结构里按钮和div之间没有任何空白（比如写成<button class="accordion">...</button><div>），nextSibling也能工作，但这种写法维护性差，显然不如用nextElementSibling可靠，它能适配各种格式的HTML结构。

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