如果内部div具有某个类,使用javascript,如何隐藏父div

Question

好的说我有很多div.一些div,孩子们有一个班级,其他孩子们有不同的班级.

我想只隐藏有一个特定类的孩子的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>

现在,让我们说我只想隐藏具有子div的父div .childB

据我所知(CSS3无论如何),这不能用CSS完成,因为CSS不允许你设置父div的样式,只允许子div.父.mainDivdiv(我想隐藏的那些)都完全一样.

这样就留下了javascript.

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

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();