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.