How to detect when all divs inside of another div are invisible

Question

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

Answer 1

Use the :visible selector:

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