title: Hide headings that are displayed before the results of a filtered search
body: <p>I have a search filter code which should only show the value of the search, and this is working. It works perfectly with the jquery code below, but the problem is that it still shows all the headings.</p>
  <p>What I want is for it to show only the heading of the word which is searched, and the rest should be hidden. How can I do this?</p>
  <p>There are many classes between the <code>h2</code> and the search word. How can I tackle just the specific heading that belongs to the specific span with the class &quot;einzeln&quot; which contains the search word?
  Could this task be solved by using the css classes &quot;d_show&quot; and &quot;d_none&quot;?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
   
  
    $("#btn-click").click(function(event) {
      var toCheck = $('#inputfeld').val().trim();
      $(".einzeln").hide().filter(':contains(' + toCheck + ')').show();
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.d_show{
      display: "";
  }
  
  .d_none{
      display: none; 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Beginner&lt;/title&gt;
        &lt;script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      
      &lt;h1&gt;I am just a text&lt;/h1&gt;
      &lt;form&gt;
          &lt;input id="inputfeld" stype="text" name=""&gt;
          &lt;button id="btn-click" type="button"&gt;Click me &lt;/button&gt;
      &lt;/form&gt;
      
      &lt;div id="mutter"&gt;
          &lt;h2 class="h_title"&gt; H2&lt;/h2&gt;
      &lt;div class="alle sec_a"&gt;
          &lt;span class="einzeln"&gt; Anne &lt;/span&gt;
          &lt;span class="einzeln"&gt; Amad &lt;/span&gt;
          &lt;span class="einzeln"&gt; Albert  &lt;/span&gt;
      
      &lt;/div&gt;
          &lt;h2 class="h_title"&gt; H2&lt;/h2&gt;
      &lt;div class="alle sec_b"&gt;
          &lt;span class="einzeln"&gt; Beat &lt;/span&gt;
          &lt;span class="einzeln"&gt; Boris &lt;/span&gt;
          &lt;span class="einzeln"&gt; Benny &lt;/span&gt;
      
      &lt;/div&gt;
          &lt;h2 class="h_title"&gt; H2&lt;/h2&gt;
      &lt;div class="alle sec_c"&gt;
          &lt;span class="einzeln"&gt; China &lt;/span&gt;
          &lt;span class="einzeln"&gt; Cees &lt;/span&gt;
          &lt;span class="einzeln"&gt; Casa &lt;/span&gt;
      
      &lt;/div&gt;
      
      
      &lt;/div&gt;
      
      
      
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>