input#wp-search-bar{
height: 40px;
width: 807px;
padding-left: 30px;
border: 1px solid #ddd;
input#wp-search-bar::-webkit-search-cancel-button{
display: none;
}
svg.icon-limpar-search{
svg.icon-limpar-search{
position: relative;
top: 8px;
right: 30px;
cursor: pointer;
} <input id="wp-search-bar" type="search" list class="produtos" placeholder="Buscar produtos..." autocomplete="off">
</div>
<div>
<svg class="icon-limpar-search" id="icon-limpar-search" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
<path fill="#ccc" d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"></path>
</svg>I need the image to remove what was typed in the search bar, preferably with jquery, can someone help me?
All you need is to create a jQuery click event listener that uses .val() to set the input to an empty string.
$('.icon-limpar-search').click(() => $('#wp-search-bar').val(''));