How To Hide Parent If Children Are Hidden?

Problem: I need a way in jQuery to hide a parent div if all the children in a list contained within said div are hidden. Context: I'm working on an employee portal that allows an a

Solution 1:

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

Solution 2:

Also include an else to toggle the visibility back on if the selection is changed:

functiontoggleContainersByChildren() {
    $('.resources-files-container').each(function () {
        if ($(this).find('li:visible').length === 0) { // note the three = signs
            $(this).hide(); //hides the container if no children are visible
        } else {
            $(this).show(); //shows it again if the children are turned back on
        }
    });
}

toggleContainersByChildren(); //call this function to check your containers for visible children every time the filter is changed

Edit: Calling attention to the === equality sign...

Solution 3:

If I understand you correctly, you want to check if all the li inside a div .resources-files-container don't have the .filter-example-1 class...

So, it would be something like this:

//Select all div with this class, and iterate through them
$('.resources-files-container').each(function() {

    //Checks if the number of li's with the specified class inside this div is "0"if($(this).find('li.filter-example-1').length == 0) {

        //Hides the div, because there's no visible li in it.
        $(this).hide();
    }
});