如何使用JavaScript隐藏含特定嵌套Label类的父级div

要实现隐藏所有包含.nbo-disabled-wrap标签的.nbd-xlabel-wrap容器，你当前通过固定层数循环向上找父元素的方法不够可靠（DOM结构变化会导致层数失效），推荐用更精准的DOM API来实现：

优化后的JavaScript代码 #

function hideLabels() {
  const disabledLabels = document.querySelectorAll('.nbo-disabled-wrap');
  
  disabledLabels.forEach(label => {
    // 直接定位当前元素最近的.nbd-xlabel-wrap祖先容器
    const targetDiv = label.closest('.nbd-xlabel-wrap');
    if (targetDiv) {
      targetDiv.style.display = 'none';
    }
  });
}

hideLabels();

代码优势 #

• closest()方法会从当前元素开始向上遍历DOM树，自动找到第一个匹配的祖先容器，完全适配DOM结构的层级变化，比固定循环层数的写法更鲁棒。
• 遍历所有.nbo-disabled-wrap元素，确保每个对应的容器都被处理。

无JS替代方案：纯CSS实现 #

如果不需要动态控制显示隐藏，直接用CSS就能搞定：

.nbd-xlabel-wrap:has(.nbo-disabled-wrap) {
  display: none;
}

注：:has()选择器已被现代主流浏览器支持（Chrome 105+、Firefox 121+等），无需额外兼容处理。

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