I have this HTML block
<div class="abc">
<div class="xyz" style="display: none;">xyz</div>
<div class="xyz" style="display: none;">xyz</div>
<div class="xyz" style="display: none;">xyz</div>
</div>
<div class="abc">
<div class="xyz" style="display: none;">xyz</div>
<div class="xyz" style="display: none;">xyz</div>
<div class="xyz" style="display: block;">xyz</div>
<div class="xyz" style="display: block;">xyz</div>
</div>
I want to hide all the parent div if it contains all the "display:none" div else I want to show parent div..
This code uses pure JavaScript. First you get a list of all elements of the class abc and create lists for their children. Then you iterate those and check for any display value other than none. If a parents children all go through when they are none you lastly set the parent to display: none otherwise you just break the loop.
let abc = document.getElementsByClassName("abc");
let breaker;
for(i = 0; i < abc.length; i++) {
let children = abc[i].children;
for(x = 0; x < children.length; x++) {
let child = children[x];
if(child.style.display != "none") {
breaker = true;
} else { breaker = false }
}
if(breaker == true) {continue}
abc[i].style.display = "none"; // Comment out to see effect
}
I added simple CSS to a fiddle to showcase it. Just comment out the last line abc[i].style.display = "none"; to confirm the effect.
Check if the children are all display none:
let parentDiv = // get parent div
let childDivs = parentDiv.childNodes;
let hideParent = true;
for(let i = 0; i < childDivs.length; i++){
if(childDivs[i].style.display != "none"){
hideParent = false;
break;
}
}
If so, hide parent:
if(hideParent){
parentDiv.style.display = "none";
}
Try like this using Jquery.
$(".abc").map(function(){
let flag = true;
$(this).find(".xyz").map(function(){
if($(this).css("display") != "none"){
flag = false;
}
});
if(flag){
$(this).css("display", "none");
}else {
$(this).css("display", "block");
}
})