How to detect when all divs inside of another div are invisible
<p>I've my HTML as</p>

<pre><code>&lt;div id="main"&gt;
    &lt;div class="item"&gt;String&lt;/div&gt;
    &lt;div class="item"&gt;String&lt;/div&gt;
    &lt;div class="item"&gt;String&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Clicking on each <code>.item</code> div sets the div clicked to <code>display: none</code>. When there are no divs displayed, I want the <code>#main</code> div to be set to <code>display :none</code> too.</p>

<p>So how do I detect that all the div <code>.items</code> inside the <code>#main</code> div are in 'display: none` mode using jQuery?</p>

<pre><code>$(document).ready(function() {
    $('.item').click(function(){
        $(this).hide();
    });
});
</code></pre>
