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

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

#1

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.


#2
<input type="search">

doesn’t work in ie 9 and lower

you also can alway write something liek that yourself ofc


#3

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


#4

Can you post what code you have so far here in a reply? Then, you can put comments in the code to better explain what you want to happen when specific button elements are clicked. You could describe an example scenarios of before and after button clicks. If you already have some code in a Codepen or JsFiddle, then just provide a link to it.


#5

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:


#6

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.


#7

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)


#8

I do not think jQuery supports the “search” event, which is why I suggested Vanilla JavaScript. If you know how to do so with jQuery, I would be very interested to know, because I was unable to find that event listed in the documentation.


#9

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