javascript - 如果内部 div 具有特定类，如何使用 javascript 隐藏父 div

Question

好吧，我有很多 div。一些 div， children 有一个类(class)，其他 div children 有不同的类(class)。

我只想隐藏具有某个类的子项的 div。

例如，

<div class="mainDiv">
    <div class="kulkul">
        <div class="childA">
        </div>
    </div>
</div>

<div class="mainDiv">
    <div class="lalala">
        <div class="childB">
        </div>
    </div>
</div>

<div class="mainDiv">
    <div class="kulkul">
        <div class="childA">
        </div>
    </div>
</div>

<div class="mainDiv">
    <div class="lalala">
        <div class="childA">
        </div>
    </div>
</div>

<div class="mainDiv">
    <div class="kulkul">
        <div class="childB">
        </div>
    </div>
</div>

<div class="mainDiv">
    <div class="lalala">
        <div class="childA">
        </div>
    </div>
</div>

现在，假设我只想隐藏具有类 .childB 的子 div 的父 div

据我所知，这不能用 CSS 完成(无论如何是 CSS3)，因为 CSS 不允许您设置父 div 的样式，只能设置子 div。父 .mainDiv div(我想隐藏的)完全相同。

这样就剩下了 javascript。

使用上面的示例，我如何隐藏所有包含类 .childB 的子 div 的 .mainDiv div？

Answer 1

基于其直接后代隐藏父元素

//Update the **sample-element-to-hide** with whatever you wanted to use as a child class with the parent element you wanted to hide e.g., 'childB'
var elementToHideList = document.getElementsByClassName("sample-element-to-hide");
for (var i = elementToHideList.length; i--;)
    elementToHideList[i].parentNode.style.display = "none";

根据子元素隐藏父元素。

//Solution for the OP
//Update the **childB** with whatever you wanted to use as a child class with the parent element you wanted to hide.
//Note that this would only works if the parent element has a **className** mainDiv. You can change mainDiv with your own parent className.

$('.classB').closest('.mainDiv').hide();