CODEWITHSUNDEEP
javascripthtmljquerycss
MARION1234
MARION1234

Reputation: 31

one button to clear my search bar in jquery

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?

Upvotes: 2

Views: 67

Answers (1)

Vincent M
Vincent M

Reputation: 166

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(''));

Upvotes: 3

Related Questions