如果子容器设置为不显示，则隐藏父容器

Question

Not sure what I'm missing here, but trying to hide the entire container for links parent-container if the anchor links inside it are set to inline display: none

I've tried checking if the style is none with [...document.querySelectorAll(".parent-container a")].map(item => item.style.display == "none" && document.querySelectorAll(".parent-container").style = "display: none")

But can't get it to check correctly.

 const parentContainer = document.querySelector(".parent-container [data-filter]"); const toggleViews = function(filterName) { parentContainer.forEach($el => { if ($el.dataset.filter == filterName || filterName == 'show-all') { $el.style.display = "initial"; } else { $el.style.cssText = "display:none;important"; } }); };

 section { border: 1px solid #000; }

 <section class="parent-container"> <div> <div class=""> <header> <h3>heading</h3> </header> <div class="col-w1"> <a href="#" class="" style="display: none;" data-filter="car"> <div class="col-item"> <img src="#" alt="">Test </div> </a> <a href="#" class="" style="display: none;" data-filter="boat"> <div class="col-item"> <img src="#" alt="">Test </div> </a> <a href="#" class="" style="display: none;" data-filter="house"> <div class="col-item"> <img src="#" alt="">Test </div> </a> </div> </div> </div> </section> <section class="parent-container"> <div> <div class=""> <header> <h3>heading</h3> </header> <div class="col-w1"> <a href="#" class="" style="display: block;" data-filter="house"> <div class="col-item"> <img src="#" alt="">Test </div> </a> <a href="#" class="" style="display: block;" data-filter="car"> <div class="col-item"> <img src="#" alt="">Test </div> </a> <a href="#" class="" style="display: block;" data-filter="boat"> <div class="col-item"> <img src="#" alt="">Test </div> </a> </div> </div> </div> </section>

Answer 1

You need a nested loop, the outer iterating over each parent-container and the inner over each a element, here using NodeList.forEach for the outer loop and Array.every over the a elements queried from each container (with getElementsByTagName in this case).

 document.querySelectorAll(".parent-container").forEach(container => { const aElements = [...container.getElementsByTagName("a")]; if (aElements.every(element => element.style.display === "none")) { container.style.display = 'none' } else { container.style.display = 'block' } });

 section{ border: 1px solid #000; }

 <section class="parent-container"><div><div class=""><header><h3>heading</h3></header><div class="col-w1"><a href="#" class="" style="display: none;"><div class="col-item"><img src="#" alt="">Test</div></a><a href="#" class="" style="display: none;"><div class="col-item"><img src="#" alt="">Test</div></a><a href="#" class="" style="display: none;"><div class="col-item"><img src="#" alt="">Test</div></a></div></div></div></section><section class="parent-container"><div><div class=""><header><h3>heading</h3></header><div class="col-w1"><a href="#" class="" style="display: block;"><div class="col-item"><img src="#" alt="">Test</div></a><a href="#" class="" style="display: block;"><div class="col-item"><img src="#" alt="">Test</div></a><a href="#" class="" style="display: block;"><div class="col-item"><img src="#" alt="">Test</div></a></div></div></div></section>

Edit

In response to your more complete snippet here is an extended example. You are still not addressing the multiple levels necessary to achieve what you need (as noted by @danh in the comments as well). You need to address each parent-container and then the relevant children of each individually. The example below first uses your logic to filter the children of each container, and then checks if they have all been hidden or not. I've implemented it with a .hidden class instead of inline CSS but you can adapt as you see fit.

 // query only the parent-containers const parentContainers = document.querySelectorAll(".parent-container"); function toggleViews(filterName) { for (const container of parentContainers) { // query relevant children const elements = [...container.querySelectorAll("[data-filter]")]; // hide filtered elements for (const element of elements) { if (element.dataset.filter === filterName || filterName === 'show-all') { element.classList.remove('hidden'); } else { element.classList.add('hidden'); } } // hide parent if all children are hidden if (elements.every(element => element.classList.contains('hidden'))) { container.classList.add('hidden'); } else { container.classList.remove('hidden'); } }; }; document.addEventListener('click', (e) => { if (e.target.nodeName === 'BUTTON'){ toggleViews(e.target.textContent.toLowerCase().replace(' ', '-')); } });

 section { border: 1px solid #000; }.hidden { display: none; }

 <button type="button" class="filter">Boat</button> <button type="button" class="filter">House</button> <button type="button" class="filter">Car</button> <button type="button" class="filter">Show all</button> <section class="parent-container"> <div> <div class=""> <header> <h3>Section 1</h3> </header> <div class="col-w1"> <a href="#" class="" data-filter="car"> <div class="col-item"> <img src="#" alt="">Car </div> </a> <a href="#" class="" data-filter="bicycle"> <div class="col-item"> <img src="#" alt="">Bicycle </div> </a> <a href="#" class="" data-filter="house"> <div class="col-item"> <img src="#" alt="">House </div> </a> </div> </div> </div> </section> <section class="parent-container"> <div> <div class=""> <header> <h3>Section 2</h3> </header> <div class="col-w1"> <a href="#" class="" data-filter="shed"> <div class="col-item"> <img src="#" alt="">Shed </div> </a> <a href="#" class="" data-filter="car"> <div class="col-item"> <img src="#" alt="">Car </div> </a> <a href="#" class="" data-filter="boat"> <div class="col-item"> <img src="#" alt="">Boat </div> </a> </div> </div> </div> </section>