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

$(".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.

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

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>

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>

$(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()
        }
    });
});