title: Custom Javascript Search that eliminates elements that don't match search parameters
body: <p>So I am trying to create a search function on a page that is filled with links separated into different sections to make it easier for people to find a particular link they are looking for by eliminating all information that doesn't pertain to what they are looking for.</p>
  
  <p>I want the search to change elements that don't match the search parameters to "display:none;" however I can't seem to figure out how to make a section whose list items are "display:none;" to also "display:none;" so that section no longer appears if it does not contain the parameters of the search.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;input type="text" id="myInput" onkeyup="mySearch()" 
  placeholder="Search this page!"&gt;
  &lt;div id="content"&gt;
  &lt;section class="parent"&gt;
                  &lt;h2&gt;heading two&lt;/h2&gt;
                  &lt;ul class="child"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;list item 1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;list item 2&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/section&gt;
  
              &lt;section class="parent"&gt;
                  &lt;h2&gt;heading two&lt;/h2&gt;
                  &lt;ul class="child"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;list item 3&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;list item 4&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
  &lt;/section&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  var input, filter, ul, li, a, i, parentDivs, children;
  input = document.getElementById('myInput');
  filter = input.value.toUpperCase();
  ul = document.getElementById("content");
  li = ul.getElementsByTagName('li');
  sect = ul.getElementsByTagName('section');
  parentDivs = document.getElementsByClassName("parent");
  children = document.getElementsByClassName("child");
  
  for (i = 0; i &lt; li.length; i++) {
  a = li[i].getElementsByTagName("a")[0];
  if (a.innerHTML.toUpperCase().indexOf(filter) &gt; -1) {
    li[i].style.display = "";
  } else {
    li[i].style.display = "none";
    }
   }
  &lt;/script&gt;
  </code></pre>