当所有孩子都不可见时使父母不可见的CSS解决方案答案

【问题标题】：CSS solution to make parent invisible when all children are invisible当所有孩子都不可见时使父母不可见的CSS解决方案
【发布时间】：2015-01-01 00:27:01
【问题描述】：

我希望根据元素 platform-group 是否有任何可见的 job-btn 子元素来隐藏它。如果所有子项都被隐藏，那么我想隐藏父项。

所以如果我有这样的 HTML 显示：

B R( C J ) HideMe( )

我希望它显示如下：

B R( C J )

这里有一个 JS 小提琴：http://jsfiddle.net/cheshirecam/wf60z08n/5/

HTML：

<tr> 

<span style="display: inline-block;" class="job-btn">B</span>
<span style="display: inline;" class="platform-group">R(
        <span style="display: inline-block;" class="job-btn filter-shown">C</span>  
        <span style="display: inline-block;" class="job-btn filter-shown">J</span>
        <span style="display: none;" class="job-btn">V</span>
</span> 
<span style="display: inline;" class="platform-group">HideMe(
        <span style="display: none;" class="job-btn">C</span>  
        <span style="display: none;" class="job-btn">J</span>
</span> 

</tr>

CSS：

.platform-group::after {
    content: ")";
}

B、C 和 J 是不同的工作代码。 C 和 J 在 R 的 platform-group 中。“HideMe”的 platform-group 没有可见的工作，所以我希望它隐藏自己。

根据用户可以设置的一些复杂过滤器参数，作业会添加/删除filter-shown 类和display: none 或inline-block。当我做那个检查时，我可以从元素中添加或删除任何东西。添加/删除一个类似乎很慢，数据值也似乎很慢。有没有更好的方法来标记父元素可以以某种方式检测到的元素？像这样工作的东西似乎如此接近：https://developer.mozilla.org/en-US/docs/Web/CSS/:empty

我使用 jQuery 来检查父级是否有 0 个具有 .filter-shown 类的后代作业，然后将其隐藏。

诀窍是，我在页面上这样做了数千次（这是一个非凡的测试结果仪表板）我想要一个仅 CSS（或至少大部分）的解决方案。问题是打开和关闭过滤时有点慢。分析表明，添加/删除 filter-shown 类对于每个作业来说都是相当昂贵的。

只要它在视觉上看起来大致相同，我不会重新排列 HTML 以使其工作。任何关于尝试的好方向的想法或想法都非常感谢。

【问题讨论】：

因为 CSS 中既没有父选择器，也没有 ':visible' 伪选择器，所以这在 CSS 中是不可能的；您需要使用 JavaScript（或其库之一）。

标签： html css

【解决方案1】：

而不是添加类假设，在 Javascript/jQuery 中，您通过设置父项的 innerHTML 添加您想要显示的子跨度？然后，如果没有添加跨度，则父元素将真正为空，然后您可以使用 :empty，如：-

platform-group:empty {
    display : none;
}

【讨论】：