Q: How to detect when all divs inside of another div are invisible I've my HTML as
<div id="main">
    <div class="item">String</div>
    <div class="item">String</div>
    <div class="item">String</div>
</div>

Clicking on each .item div sets the div clicked to display: none. When there are no divs displayed, I want the #main div to be set to display :none too.
So how do I detect that all the div .items inside the #main div are in 'display: none` mode using jQuery?
$(document).ready(function() {
    $('.item').click(function(){
        $(this).hide();
    });
});


A: Use the :visible selector:
if (! $('#main > div:visible').length) {
    $('#main').hide();
}


A: You can also do the following
if(!$('.item').is(':visible'))
    $('#main').hide();    

Here is a working example: http://jsfiddle.net/mwGeT/
