Clear Button in Bootstrap Input Group Component

You may also like...


  1. Volvoxe says:

    What a great solution. I use it as a hint (question mark) within an input. Looks very slick to me.

  2. priyanka says:

    hello, I used the function but the icon to remove text is not appearing when i write anything. Who can help me to solve this ? Thank you.

  3. Gustavo says:

    Great solution!!!!

  4. peppe says:

    hello, I used the function but the icon to remove appears in a line below. Who can help me solve? Thank you.

  5. Eric Lavrilleux says:

    Thanks a lot, that works very well.
    I'm trying to do it with clear button visible on focus in and hidden on focus out.
    My problem is that it disappear when I click on it.
    Do you know how to do it ?

    • The Web Flash says:

      Hi Eric, you can bind the focus and blur events on the input element as shown below.

      $('.has-clear input[type="text"]').on('focus input propertychange', function() {
        var $this = $(this);
        var visible = Boolean($this.val());
        $this.siblings('.form-control-clear').toggleClass('hidden', !visible);
      }).on('blur', function() {

      Example here:

      • Eric Lavrilleux says:

        Thanks Hendy, that's what I did, but when you click on the clear button, the input is not clearing.

        • The Web Flash says:

          Oops, sorry, didn't notice that. You can return false; in the clear button's mousedown event to prevent the input's blur event from being triggered.

          $('.form-control-clear').on('mousedown', function() {
            return false;
          }).click(function() {

          Updated pen:

Leave a Comment

Wrap your code block in [code] and [/code] tags.

This site uses Akismet to reduce spam. Learn how your comment data is processed.