hide h4 on search of text

Question

I have the search script for filtering the text but wanted to hide the h4 which is there in top of ever ol. How to hide the same?

What is happening is the text filters the search but we can still see the h4(Which should have been in hidden)

Screen shot of output

  function myFunction() {
      var input, filter, ol, li, a, i, txtValue;
      input = document.getElementById("myInput");
      filter = input.value.toUpperCase();
      li = document.querySelectorAll("ol li");
      var parent;
      var sibiling;
      for (i = 0; i < li.length; i++) {

          a = li[i].getElementsByTagName("a")[0];
          txtValue = a.textContent || a.innerText;
          if (txtValue.toUpperCase().indexOf(filter) > -1) {
              li[i].style.display = "";
          } else {
              li[i].style.display = "none";
              parent = li[i].parentElement;
              //console.log(parent);
              sibiling = parent.previousElementSibling;
              //console.log(sibiling);
              sibiling.style.display = "none";
          }
      }
  }

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
    
    <h4>Name List 1</h4>
    <div class="basic_forms" id="basic_forms1">
    <ol id="myUL">
      <li><a href="#">Adele</a></li>
      <li><a href="#">Bob</a></li>
    </ol>
    
    <h4>Name List 2</h4>
    <div class="basic_forms" id="basic_forms2">
    <ol id="myUL2">
      <li><a href="#">Agnes</a></li>
      <li><a href="#">Billy</a></li>
    </ol>
    
    <h4>Name List 3</h4>
    <div class="basic_forms" id="basic_forms3">
    <ol id="myUL3">
      <li><a href="#">Anim</a></li>
      <li><a href="#">Bitto</a></li>
      <li><a href="#">Cindy</a></li>
    </ol>

Answer 1

I hope this solves your question. I hide the h4 whenever the search input is longer than 1. If you delete the search the h4 headers are displayed again. Feel free to change the condition to hide the headers to what makes sense to you (maybe clicking outside the search field etc).

Best, Paul

Edit:

I didn't understand the part with the siblings and the parents so I commented it out. But it seems to work anyway ;)

      function myFunction() {
          var input, filter, ol, li, a, i, txtValue, parent, sibiling, h4;
          input = document.getElementById("myInput");
          filter = input.value.toUpperCase();
          li = document.querySelectorAll("ol li");
          
          h4 = document.querySelectorAll("h4");
          // console.log(filter);
          if(filter.length > 0){
            h4.forEach(el => {
              el.style.display = "none";
            });
          }else{
            h4.forEach(el => {
                el.style.display = "block";
            });
          }
          for (i = 0; i < li.length; i++) {
              a = li[i].getElementsByTagName("a")[0];
              //console.log(a);
              txtValue = a.textContent || a.innerText;
              if (txtValue.toUpperCase().indexOf(filter) > -1) {
                  li[i].style.display = "";
              } else {
                  li[i].style.display = "none";
                  parent = li[i].parentElement;
                  /* 
                  console.log(parent);
                  sibiling = parent.previousElementSibling;
                  //console.log(sibiling);
                  sibiling.style.display = "none";
                  */
              }
          }
      }

    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
        
        <h4>Name List 1</h4>
        <div class="basic_forms" id="basic_forms1">
        <ol id="myUL">
          <li><a href="#">Adele</a></li>
          <li><a href="#">Bob</a></li>
        </ol>
        
        <h4>Name List 2</h4>
        <div class="basic_forms" id="basic_forms2">
        <ol id="myUL2">
          <li><a href="#">Agnes</a></li>
          <li><a href="#">Billy</a></li>
        </ol>
        
        <h4>Name List 3</h4>
        <div class="basic_forms" id="basic_forms3">
        <ol id="myUL3">
          <li><a href="#">Anim</a></li>
          <li><a href="#">Bitto</a></li>
          <li><a href="#">Cindy</a></li>
        </ol>