javascript - 如果子 div 丢失，则隐藏父 div

Question

如果缺少子div，是否可以隐藏父div？

在下面的示例中，如果缺少某些 div(例如 .views-content 和 .views-row)，我想隐藏“#live-sessions”的父 div。

这就是 div 存在时的样子:

<div id="live-sessions">
            <div class="container">
                <div class="row">
                    <div class="col-sm-3">
                        <h3 class="session-title">Sessions Live Now</h3>

                    <div class="col-sm-9">

                       <div class-"view-display-id-live_sessions">

                            <div class="views-content">

                               <div class="views-row">
                               </div>

                               <div class="views-row">
                               </div>

                           </div>

                       </div>


                    </div>
                </div>
            </div>
 </div>

这是缺少 div 时的样子:

<div id="live-sessions">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-3">
                            <h3 class="session-title">Sessions Live Now</h3>

                        <div class="col-sm-9">

                           <div class-"view-display-id-live_sessions">


                           </div>


                        </div>
                    </div>
                </div>
</div>

我尝试在父方法中使用 :empty 选择器，但我的子 div 包含一些空行，因此它认为它不是空的。另外我想隐藏空 div 的父级的父级。

$(".view-display-id-live_sessions:empty").parent().hide(); 

Answer 1

您的 html 中有一个拼写错误:

class-"view-display-id-live_sessions"

应该是

class="view-display-id-live_sessions"

您可以尝试以下 jQuery 代码:

if ($(".view-display-id-live_sessions").html().trim() == '') {
    $(".view-display-id-live_sessions").parent().parent().hide();
}

jqVersion demo