JavaScript实现关联子div不存在时隐藏对应标题div

核心思路 #

• 遍历所有分类标题元素，从id规则中提取对应分类编号
• 利用CSS属性前缀选择器实现id通配匹配，找到对应分类下的所有子内容项
• 统计DOM中存在且处于显示状态的子项数量，数量为0时隐藏对应标题，否则保持显示
• 函数可重复调用，适配动态过滤、元素增删的场景

关键语法说明 #

你需要的id通配匹配不需要手写正则遍历，原生支持的CSS属性前缀选择器[id^="指定前缀"]就可以实现，直接传入querySelectorAll即可使用，兼容所有主流浏览器。
判断元素是否处于显示状态用offsetParent !== null即可，可准确识别被display: none隐藏的元素（包含父级隐藏导致元素不可见的场景）。

完整代码 #

// 检查并隐藏无有效子内容的分类标题
function updateTitleVisibility() {
  // 获取所有分类标题
  const allTitles = document.querySelectorAll('.prov-title');
  allTitles.forEach(titleEl => {
    // 从标题id提取分类编号，例：id="title-2" 提取到分类编号为"2"
    const categoryNum = titleEl.id.replace('title-', '');
    // 通配匹配该分类下所有子内容：id以"child-分类编号"开头的article元素
    const relatedChildren = document.querySelectorAll(`[id^="child-${categoryNum}"]`);
    // 统计实际可见的子元素数量
    const visibleCount = Array.from(relatedChildren).filter(childEl => {
      return childEl.offsetParent !== null;
    }).length;
    // 无可见子元素则隐藏标题，否则恢复显示
    titleEl.style.display = visibleCount === 0 ? 'none' : '';
  });
}

调用方式 #

• 页面初始加载完成后执行一次，处理初始渲染状态
• 每次完成内容过滤、DOM元素增删操作后，再次调用该函数更新状态即可

示例调用代码：

// 页面DOM加载完成后初始化
document.addEventListener('DOMContentLoaded', updateTitleVisibility);

// 自定义过滤逻辑示例
function runContentFilter() {
  // 此处为原有的过滤、移除/隐藏子元素的业务代码
  // ...

  // 过滤操作完成后，更新标题显示状态
  updateTitleVisibility();
}

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