如果內部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>

現在上面，假設我只想隱藏具有類.childB的子div的父div

據我所知（CSS3無論如何），這不能用CSS完成，因為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();

Answer 2

你可以用純javascript做到這一點：

 var elementsChildB = document.getElementsByClassName("childB") for(var i = 0 ; i < elementsChildB.length ; i++){ elementsChildB[i].parentNode.style.display = "none" ; } 

 <div class="mainDiv"> <div class="childA"> a </div> </div> <div class="mainDiv"> <div class="childA"> a </div> </div> <div class="mainDiv"> <div class="childB"> b </div> </div> <div class="mainDiv"> <div class="childA"> a </div> </div> <div class="mainDiv"> <div class="childB"> b </div> </div> <div class="mainDiv"> <div class="childA"> a </div> </div> 

或者使用Jquery：

 $(".childB").parent().hide() 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="mainDiv"> <div class="childA"> a </div> </div> <div class="mainDiv"> <div class="childA"> a </div> </div> <div class="mainDiv"> <div class="childB"> b </div> </div> <div class="mainDiv"> <div class="childA"> a </div> </div> <div class="mainDiv"> <div class="childB"> b </div> </div> <div class="mainDiv"> <div class="childA"> a </div> </div> 

Answer 3

使用jQuery，您可以使用以下選擇器。 這將隱藏所有mainDiv含childB但不mainDiv包含其他元素或childB沒有mainDiv是其父母（在任何一個層面，通過使用closest - https://api.jquery.com/closest/ ）：

 $(".childB").closest(".mainDiv").hide();

小提琴：

 $(function() { $(".childB").closest(".mainDiv").hide(); }); 

 .childB { background-color: red; border: 1px solid black; height: 50px; margin-left:20px; } .childA { background-color: green; border: 1px solid black; height: 50px; margin-left:10px; } .mainDiv { background-color: yellow; border: 1px solid black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="mainDiv"> <div class="childA"> </div> </div> <div class="mainDiv"> <div class="childA"> </div> </div> <div class="mainDiv"> <div class="childB"> </div> </div> <div class="mainDiv"> PARENT <div class="childA">Don't hide </div> </div> <div class="mainDiv"> PARENT <div class="childB">To be hidden </div> </div> <div class="mainDiv"> This contains a child A which contains a child B: <br /> <div class="childA">It is a child A <div class="childB">To be hidden </div> </div> </div> <div class="mainDiv"> <div class="childA"> </div> </div> <div class="childB">Should not be hidden </div> 

Answer 4

Javascript方法

var childB = document.getElementsByClassName("childB");
for(var e = 0; e <= childB.length; e++){
  childB[e].parentNode.style.display = "none"; 
}

JQuery方法

$('.childB').parent().hide();

Answer 5

好吧，您可以使用.parent()方法選擇指定子節點的父節點，並使用.hide()隱藏選定的父節點。

 $('.childB').each(function() { $(this).parent().hide(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="mainDiv"> <div class="childA"> A </div> </div> <div class="mainDiv"> <div class="childA"> A </div> </div> <div class="mainDiv"> <div class="childB"> B </div> </div> <div class="mainDiv"> <div class="childA"> A </div> </div> <div class="mainDiv"> <div class="childB"> B </div> </div> <div class="mainDiv"> <div class="childA"> A </div> </div> 

Answer 6

使用jQuery， $('.childA').parent().hide();

Answer 7

抓取所有div的mainDiv類和循環為每個可以檢查子類有特定的類！

var main = document.getElementsByClassName("mainDiv");
for(var i = 0; i < main.length ; i++){
    if(main[i].children[0].classList[0] == "childB"){ //assure only has one children
        main[i].style.display = "none";
    }
}