使用原生JavaScript在特定类不存在时隐藏指定主div

需要实现：当页面中不存在ks-chart-container类的元素时，隐藏类为product-block-list__item product-block-list__item--content size__chart的外层div（尽量不用jQuery）。

以下是**存在ks-chart-container**的DOM结构：

<div class="product-block-list__item product-block-list__item--content size__chart">
  <div class="card">
    <button class="card__collapsible-button" data-action="toggle-collapsible" aria-expanded="false" aria-controls="block-template--14697163096134__main-092edfe6-4684-4f51-970d-dfb11469ca43">
      <span class="card__title heading h3">Size chart</span>
      <span class="plus-button plus-button--large"></span>
    </button>
    <div id="block-template--14697163096134__main-092edfe6-4684-4f51-970d-dfb11469ca43" class="card__collapsible" style="height: 0px;">
      <div class="card__collapsible-content">
        <div class="rte text--pull">
          <div id="KiwiSizingChart" class=" kiwiSizingLoaded">
            <div class="ks-chart-container sizing-chart-container">
              <div class="ks-chart-tab-container"></div>
            </div>
            <div class="ks-calculator-container sizing-calculator-container ks-calculator-inject hide"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

以下是**不存在ks-chart-container**的DOM结构：

<div class="product-block-list__item product-block-list__item--content size__chart">
  <div class="card">
    <button class="card__collapsible-button" data-action="toggle-collapsible" aria-expanded="false" aria-controls="block-template--14697163096134__main-092edfe6-4684-4f51-970d-dfb11469ca43">
      <span class="card__title heading h3">Size chart</span>
      <span class="plus-button plus-button--large"></span>
    </button>
    <div id="block-template--14697163096134__main-092edfe6-4684-4f51-970d-dfb11469ca43" class="card__collapsible" style="height: 0px;">
      <div class="card__collapsible-content">
        <div class="rte text--pull">
          <div id="KiwiSizingChart" class=" kiwiSizingLoaded"></div>
        </div>
      </div>
    </div>
  </div>
</div>

自己尝试的CSS代码无效：

.ks-chart-container:empty .product-block-list__item.product-block-list__item--content.size__chart { display: none; }

为什么你的CSS无效？ #

CSS选择器只能从父元素往子元素方向匹配，没法反向选择（从子元素找父元素）；而且:empty伪类是指元素自身没有任何内容（包括文本、子元素），不是指元素内部不存在某个特定子元素，所以你的写法完全不符合需求。

原生JS实现方案（无需jQuery） #

纯CSS做不到反向判断子元素是否存在来控制父元素显示，用原生JS是最直接的方式：

// 等待DOM加载完成再执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取目标外层div
  const sizeChartBlock = document.querySelector('.product-block-list__item.product-block-list__item--content.size__chart');
  // 检查该div内部是否存在ks-chart-container元素
  const hasChartContainer = sizeChartBlock.querySelector('.ks-chart-container');
  
  // 如果不存在，就隐藏外层div
  if (!hasChartContainer) {
    sizeChartBlock.style.display = 'none';
  }
});

多元素场景适配 #

如果页面中有多个这样的外层div，把querySelector换成querySelectorAll，循环处理每个元素即可：

document.addEventListener('DOMContentLoaded', function() {
  const sizeChartBlocks = document.querySelectorAll('.product-block-list__item.product-block-list__item--content.size__chart');
  
  sizeChartBlocks.forEach(block => {
    const hasChartContainer = block.querySelector('.ks-chart-container');
    if (!hasChartContainer) {
      block.style.display = 'none';
    }
  });
});

使用提示 #

把代码放在页面的</body>标签之前，或者放在外部JS文件中引入，确保DOM元素加载完成后再执行。

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