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>Necesito la imagen para quitar lo escrito en la barra de busqueda, de preferencia con jquery, alguien me puede ayudar?
Todo lo que necesita es crear un detector de eventos de clic de jQuery que use .val() para establecer la entrada en una cadena vacía.
$('.icon-limpar-search').click(() => $('#wp-search-bar').val(''));