this is an example how to clear input value when click a clear button in search box . create a search form to demonstrate this task

div #serchhide{
    display:none;
    cursor:pointer
}

then create a search form

<form action="" method="post">
     <div class="input-container-search">
	    <input type="search" name="search_query" id="search_query" onkeyup="searchsuccess()"  placeholder="Search here..."/>               
                <span  onclick="searchclear()">
	             <i id="serchhide" class="fas fa-times eyes" onclick="searchclear()"></i>
	             </span>                  
               <button type="submit" name= "search" class="searchicon">
            </button>
	  </div>
</form>

the out put will be as seen below

then apply a JavaScript function to clear the input value.

function searchsuccess() {
     var search_value = document.getElementById("search_query").value;
	 if(search_value.length >= 1) { 
            document.getElementById('serchhide').style.display="block"; 
        }
        else { 
            document.getElementById('serchhide').style.display="none";         
        }
    }
function searchclear() {
    document.getElementById("search_query").value="";
    document.getElementById('serchhide').style.display="none";
}

that's all about for this task.