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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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.
$(".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");
}
})
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">
Demo
$(".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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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.
CSS:
.spr-badge-container{ display: none;}
JS:
winodw.onload = ()=>{
if(jQuery('.stamped-container').data('count') != '0' ){
$(".spr-badge-container").css('display', 'block');
// use CSS or show to display the container
$(".spr-badge-container").show();
}
}
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
https://jsfiddle.net/sudarpochong/ap3z3r7s/
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);
hideLetterDivIfAllNumberDivHidden(selectedLetter);
}
Function filterLetterNumber
function filterLetterNumber(letter, number) {
// console.log("filterLetterNumber", letter, number);
$(".letter").hide();
$(".number").hide();
$(letter).show();
$(number).show();
}
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);
$(this).show();
//var countHidden = $(el).children(".number:hidden").length;
var countVisible = $(el).children(".number:visible").length;
//console.log("countVisible", countVisible, "countHidden", countHidden);
if (countVisible == 0) {
$(this).hide();
}
});
}
How to hide parent if children are hidden?
$(".resources-files-container")
.filter(function(){
return $(this).find("li:visible").length == 0;
})
.hide();
Filter the list of .resources-files-container
elements to just those with no visible li
elements and then hide that filtered set.
http://jsfiddle.net/n403agxn/
Hide parent element if no elements exist in child element
Contrary to your assumption
$(this).children(".careersIntegration__accordion-jobs")
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) {
$(this).hide();
} else {
console.log('has children');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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>
<div class="careersIntegration__accordion-jobs"></div>
</div>
<!-- this should not be hidden -->
<div class="careersIntegration__accordion">
<div class="careersIntegration__accordion-header">
<span class="careersIntegration__accordion-dept">Tech</span>
</div>
<div class="careersIntegration__accordion-jobs">
<div>item</div>
</div>
</div>
</div>
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 = e.target.value; 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 !== '') { option.style.display = 'block'; } else { option.style.display = '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
Try
$(function () {
var childs = $("[class^=child]");
childs.click(function () {
$(this).hide();
//check if any child is visible, if not hide the mother element
if(!childs.filter(':visible').length){
$('#mother').hide()
}
});
});
Demo: Fiddle
Related Topics
Check If Page Gets Reloaded or Refreshed in JavaScript
How to Check Whether Session Is Null or Not in JavaScript
Bootstrap Slides Lagging While Using Multi Item Carousel Using Angular 6
Removing Number from Notification Icon
Method for Splitting String into Separate Cells in Sheets/App Script
How to Remove Errors Warnings from Console
Handling Multiple Http Responses One by One in Angular 6
How to Add Active Class/State for Li Element in Reactjs
Detect If User Is Using Webview for Android/Ios or a Regular Browser
How to Clear the Focus in JavaScript
Force Download an Image from Src Using JavaScript
Getting Null Value in List When Passing by Ajax Call to MVC Controller
How to Merge Two Json Object Values by Id With Plain JavaScript (Es6)
Angularjs:Ng-Model Binding Not Updating When Changed With Jquery
How to Add or Update a Query String Parameter
How to Get the Value by a Key from a Super Nested Json