title: Hiding the parent element when there is no matching descendant elements
body: <p>Before I start, this is a kind of 'part 2' of <a href="https://stackoverflow.com/questions/19078526/search-for-divs-that-contain-specified-text">Search for divs that contain specified text</a></p>
  
  <p>Hey.
  I got a list of divs, and each has several divs (to style), it looks like this:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class='divlist'&gt;
  
  &lt;div&gt;
      &lt;div&gt;abc&lt;/div&gt;&lt;div&gt;def&lt;/div&gt;&lt;div&gt;ghi&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>In the <code>body</code> tags I've also got a search (<code>&lt;input type='text' id='search' /&gt;</code>)</p>
  
  <p>and my jquery:</p>
  
  <pre><code>$('#search').on('input', function(){
      var text = $(this).val();
      $('.divlist div').show();    
      $('.divlist div:not(:contains(' + text + '))').hide();
  });
  </code></pre>
  
  <p>Now, if I search for <code>abc</code> it will remove the div containing <code>def</code> and <code>ghi</code>, although the search matched the div (the one with the abcdefghi inside).
  So:
  How would I make a search function that removes the main div if nothing matches (for instance, <code>j</code>) and show all of the divs inside the div containing the other divs no matter how many divs match.</p>
  
  <p>Thanks in advance.</p>
  
  <p>ps. if someone knows a better title, feel free to change it</p>