Targeting click of "clear" button (x) on input field

How would you go about targeting the click of the clear button at the end of an input field?

I searched around and from my understanding, there is a certain and easy way to do it, but it’s not standard at the moment, so not all browsers will accept it, i guess.

I basically want to empty the search results if the X button inside the input field is clicked.

Thanks.

<input type="search">

doesn’t work in ie 9 and lower

you also can alway write something liek that yourself ofc

Thank you for the response, but I’m afraid you did not understand my question.

Here’s a link to my pen - https://codepen.io/sk1995/pen/YYEbYz

So, imagine I write something in the input field, i press enter or press search to search for the wiki articles. The articles appear, all good. Afterwards, If you hover over the input field, you can see an X sign at the right corner of the input field. If you press it, it deletes whatever there was in the input field, but if it is pressed, the searched for articles remain on the page.

I know how to empty the div that is full of the found articles. What I need to do is attach an action to it. When I press X, i want not only for the text in the input field to disappear, but I also want to empty the div that contains the found articles. To do that, I need to know how to name the action of clicking the X mark.

I guess my question probably wasn’t written well enough before. :slightly_smiling_face:

Have you tried adding the following:

document.getElementById("searchbox").addEventListener("search", function(event) {
  $(".resultingarticles").empty();  
});

The “search” event is triggered when the “x” is clicked. This definitely works on Chrome, but you would need to test this on Firefox and IE, because they could act differently.

well i was misled by your mentioning that not all browsers support it so i thought when you wrote you wanted to clear search results you made a typo and actually meant you wanted to clear the search query

to clear results you have to use some custom js that clears a targeted element on click and it is universally supported (at least as long as you add a clickable icon x), you were given an example how to do it in this thread already (i would personally use jquery though)

i have meant something with a clickable icon, like in this case something like this, a crude version ofc (needs font awesome, i also added bootstrap (neither of them is used in his project), without bootstrap with this margin it won’t be placed properly in the searchbox but w/e, one can use ccs to make the search box higher without any bootstrap, it’s just an example anyway, the button placement etc stuff needs tidying too):

html:

    <div>
      <input id="searchbox" type="text">
      <span id="clear" class="fa fa-times-circle"></span>
    </div>

css:

    #clear {
      cursor: pointer;
      margin: auto -23px;
    }

js:

    $("#clear").click(function(){
      $(".resultingarticles").empty();
      $("#searchbox").val("");
    });

clicking that x will both clear the input and clear the search results

1 Like