title: Hide section completely when no children available | Isotope.js Filtering
body: <p>I am creating an application and using the <a href="https://isotope.metafizzy.co/" rel="nofollow noreferrer">isotope</a> filter library. </p>
  
  <p>I have multiple sections with headers which under each one there is an isotope container like this:</p>
  
  <pre><code>&lt;div class="main-items-container-a"&gt;
      &lt;h2&gt;Items Category 1&lt;/h2&gt;
      &lt;div class="items-container"&gt;
          &lt;div class="items a"&gt;A&lt;/div&gt;        
          &lt;div class="items a"&gt;A&lt;/div&gt;
          &lt;div class="items b"&gt;B&lt;/div&gt;
          &lt;div class="items c"&gt;C&lt;/div&gt;
          &lt;div class="items c"&gt;C&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="main-items-container-b"&gt;
      &lt;h2&gt;Items Category 2&lt;/h2&gt;
      &lt;div class="items-container"&gt;
          &lt;div class="items"&gt;A&lt;/div&gt;        
          &lt;div class="items"&gt;A&lt;/div&gt;
          &lt;div class="items"&gt;B&lt;/div&gt;
          &lt;div class="items"&gt;C&lt;/div&gt;
          &lt;div class="items"&gt;C&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am also creating filters for the above items and I would like that when all items are filtered and no more items are available in the section, the whole section including the title <code>h2</code> gets hidden. Vice versa when it then needs to show.</p>
  
  <p>I did try to achieve something using the following event available by Isotope, however I couldn't get to the parent of length 0 of the filtered items.</p>
  
  <pre><code>$grid.on( 'arrangeComplete', function( event, filteredItems ) {
    console.log( filteredItems.length );
  });
  </code></pre>
  
  <p>I have created a <a href="https://jsfiddle.net/se8bg70x/" rel="nofollow noreferrer">JSFiddle</a> to demonstrate this.</p>
  
  <p>Can someone guide me to what I am doing wrong to achieve this.</p>