how can I hide parent div if all the children are "display:none"

Question

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..

Answer 1

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.

https://jsfiddle.net/h40f8L6o/42/

Answer 2

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";
}

Answer 3

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");
    }
})

Answer 4

I dont see any direct CSS properties will do the trick here. You can use ES to achieve this,

    const parentDiv = document.getElementsByClassName("abc");
    Array.prototype.forEach.call(parentDiv, function (pDiv, i) {
        let isAllDisplayNone = true;
        Array.prototype.forEach.call(pDiv.children, function (cDiv, j) {
            if(cDiv.style.display === "block") {
                isAllDisplayNone = false;
            }
        });
        if(isAllDisplayNone === true)
            pDiv.style.display = "none";
        
    });

Iterate all the parent and child items to identify if all the child items are display none. If so hide the parent element.