How to Hide the Parent Div If All Its Child Div Are Hidden

How to Hide parent DIV if all child Div are hidden (display:none)

Loop through all children dom elements to check for the display style and update the status

$(function(){  var hid = true;
$('button').click(function(){$('.xyz').each(function(index,item){ console.log($(item).css("display")); if($(item).css("display") != "none") { hid = false; } }).promise().done(function(){ if(hid == true) { console.log("true"); $('.abc').hide(); } });}) })
<script src=""></script><div class="abc"><div class="xyz" style="display: none;">{.......}</div><div class="xyz" style="display: none;">{.......}</div><div class="xyz" style="display: none;">{.......}</div><div class="xyz" style="display: none;">{.......}</div><div class="xyz" style="display: none;">{.......}</div></div><button type="button">Click</button>

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

Try like this using Jquery.

let flag = true;
if($(this).css("display") != "none"){
flag = false;

$(this).css("display", "none");
}else {
$(this).css("display", "block");

How to Hide Parent Div when the Child Div's display is none

You can just add:

if($('.filterTags .tagParent:visible').length == 0) $('.filterTags').hide();

This will check if there are any visible elements with the class tagParent and if there is none, then it will hide <div class="filterTags">


$(".tagCloser").click(function() {  $(this).parent(".tagParent").hide();  if($('.filterTags .tagParent:visible').length == 0) $('.filterTags').hide();});
.filterTags {  display: flex;  flex-wrap: wrap;  padding: 20px 25px 10px;  background: yellow;}
.tagParent { padding: 0px 0px 0px 15px; background: #e40046; color: #fff; font-family: Bold; border-radius: 5px; margin: 0px 10px 10px 0px; display: flex;}
.tagContent { align-self: center;}
.tagCloser { padding: 7px 10px; cursor: pointer; align-self: center;}
<script src=""></script>
<div class="filterTags"> <div class="tagParent"> <span class="tagContent">Urgent</span> <span class="tagCloser">x</span> </div>
<div class="tagParent"> <span class="tagContent">Popular</span> <span class="tagCloser">x</span> </div></div>

How can I hide parent element if child element is hidden?

Okay, according to your description you try this approach, by default hide them all .spr-badge-container
and then on page load check the count and if there is value then show or otherwise leave it hidden.


.spr-badge-container{ display: none;}


winodw.onload = ()=>{
if(jQuery('.stamped-container').data('count') != '0' ){
$(".spr-badge-container").css('display', 'block');
// use CSS or show to display the container

Note: JS code using jQuery so must be loaded after the jQuery lib load, otherwise code not works.

how to hide parent div if child is hidden after select option

I simplified your code.

Select/dropdown event handler

$("#selectLetter").on("change", selectChangeEventHandler);
$("#selectNumber").on("change", selectChangeEventHandler);

Function selectChangeEventHandler

function selectChangeEventHandler(e) {
var selectedLetter = "." + $("#selectLetter").val();
var selectedNumber = "." + $("#selectNumber").val();
filterLetterNumber(selectedLetter, selectedNumber);

Function filterLetterNumber

function filterLetterNumber(letter, number) {
// console.log("filterLetterNumber", letter, number);
Function hideLetterDivIfAllNumberDivHidden

would hide the parent div class="letter" if its child div
class="number" has been hidden after touching a select option

function hideLetterDivIfAllNumberDivHidden(selectedLetter) {

// console.log("hideLetterDivIfAllNumberDivHidden", selectedLetter);

if (!selectedLetter || selectedLetter === "") {
console.log("", selectedLetter);
selectedLetter = ".letter";

$(selectedLetter).each(function (index, el) {
console.log("hideLetterDivIfAllNumberDivHidden", index, el);

//var countHidden = $(el).children(".number:hidden").length;
var countVisible = $(el).children(".number:visible").length;
//console.log("countVisible", countVisible, "countHidden", countHidden);

if (countVisible == 0) {



How to hide parent if children are hidden?

return $(this).find("li:visible").length == 0;

Filter the list of .resources-files-container elements to just those with no visible li elements and then hide that filtered set.

Hide parent element if no elements exist in child element

Contrary to your assumption


doesn't return the children of elements using the CSS class careersIntegration__accordion-jobs. In fact it only returns the actual elements using this CSS class. If you want to have it's children you need to append another call to .children().

For example:

$(".careersIntegration__accordion").each(function() {
if ($(this).children(".careersIntegration__accordion-jobs").children().length == 0) {
} else {
console.log('has children');
<script src=""></script>
<div class="careersIntegration__listing">

<!-- this should be hidden -->
<div class="careersIntegration__accordion">
<div class="careersIntegration__accordion-header">
<span class="careersIntegration__accordion-dept">Sales</span>
<div class="careersIntegration__accordion-jobs"></div>

<!-- this should not be hidden -->
<div class="careersIntegration__accordion">
<div class="careersIntegration__accordion-header">
<span class="careersIntegration__accordion-dept">Tech</span>
<div class="careersIntegration__accordion-jobs">


While Searching Hide Parent Element if All Child Elements Are Hidden

You can iterate over all your sections and find the link-elements inside each section. Then iterate over that links and check if the display-style is not none. If you found any link that is displayed, the section should be displayed, otherwise it should be hidden.

let searchBox = document.querySelector("#search-box");let contracts = document.querySelector("#mainContainer");let when = "keyup";
searchBox.addEventListener("keyup", function (e) { let text =; let options = contracts.querySelectorAll('.item > a');
for (let i = 0; i < options.length; i++) { let option = options[i]; let optionText = option.text; let lowerOptionText = optionText.toLowerCase(); let lowerText = text.toLowerCase(); let regex = new RegExp("^" + text, "i"); let match = optionText.match(regex); let contains = lowerOptionText.indexOf(lowerText) != -1;
if(match || contains && text !== '') { = 'block'; } else { = 'none'; } } // Hide sections when all links are hidden let sections = contracts.querySelectorAll('.item'); for (let j = 0; j < sections.length; j++) { let anyLinkNotHidden = false; let links = sections[j].querySelectorAll('a'); for (let k = 0; k < links.length; k++) { if (links[k].style.display != 'none') { anyLinkNotHidden = true; } } if (anyLinkNotHidden) { sections[j].style.display = 'block'; } else { sections[j].style.display = 'none'; } } });
  <input type="search" id="search-box" placeholder="Search...">
<div id="mainContainer" class="column-container row"> <div class="item column"> <h2>Forms</h2> <a href="/examples/forms/simple-contact-form.phtml">Simple contact form - WIP</a> <a href="/examples/forms/online-payment-form-networkmerchants.phtml">Online payment form using Network Merchants - WIP</a> <a href="/examples/forms/form-with-attachment.phtml">Form with attachment</a> </div> <div class="item column"> <h2>Videos</h2> <a href="/examples/videos/responsive-youtube-video.phtml">Responsive Youtube Video</a> </div> <div class="item column"> <h2>Calendars</h2> <a href="/examples/calendars/show-few-events.phtml">Show Few Events</a> <a href="/examples/calendars/show-all-events.phtml">Show All Events</a> </div> </div>

jQuery hide parent block if all childs hidden


$(function () {
var childs = $("[class^=child]"); () {
//check if any child is visible, if not hide the mother element

Demo: Fiddle

Related Topics

Leave a reply