一个按钮来清除我的搜索栏在jquery

Question

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>

我需要的图像删除什么是键入在搜索栏，最好与jquery，有人能帮助我吗?

Answer 1

您所需要的只是创建一个jQuery点击事件监听器，它使用。val()将输入设置为一个空字符串。

$('.icon-limpar-search').click(() => $('#wp-search-bar').val(''));