调用collapseEmptyDivs仅折叠广告位，如何隐藏父广告容器？

问题 #

我的广告结构如下：

<div class="ad-container">
  <p>Ad slot #1</p>
  <div id="ad-slot-1" class="ad-slot"></div>
</div>

调用googletag.pubads().collapseEmptyDivs();后，只有ad-slot-1被折叠，但父容器ad-container仍显示，怎么实现父容器也隐藏的效果？

两种可行方案 #

方案1：监听广告渲染事件（兼容性好，推荐） #

利用Google Ads的slotRenderEnded事件，判断广告是否未填充，找到对应父容器并隐藏：

// 监听广告渲染完成事件
googletag.pubads().addEventListener('slotRenderEnded', function(event) {
  if (event.isEmpty) {
    const adSlotEl = document.getElementById(event.slot.getSlotElementId());
    if (adSlotEl) {
      // 找到最近的.ad-container父元素
      const parentContainer = adSlotEl.closest('.ad-container');
      if (parentContainer) {
        parentContainer.style.display = 'none';
      }
    }
  }
});

// 保留原有折叠逻辑
googletag.pubads().collapseEmptyDivs();
googletag.enableServices();

方案2：CSS :has()选择器（简洁，需现代浏览器支持） #

collapseEmptyDivs会给未填充的广告位自动添加googletag-empty类，通过CSS选择器直接控制父容器：

.ad-container:has(.ad-slot.googletag-empty) {
  display: none;
}

注意：:has()选择器仅支持Chrome 101+、Firefox 121+、Safari 15.4+等现代浏览器，若需兼容旧版浏览器，优先选择方案1。

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