Create a Clearable TextBox with jQuery


Recently I came across a wonderful article by David Walsh on Clearable Textboxes with Dojo Toolkit [link]. This is a simple implementation where a clear button (x) added in a textbox which lets user to clear the content of the textbox. I have seen this simple feature in many websites and feel its very useful to have. It increase the usability of form.

I thought to implement the same feature using jQuery. Here is a simple plugin that I wrote to add clearable feature to any textbox in your HTML form. All you need is to call clearable() method on the textbox. For example.






  • FH 20 September, 2011, 21:06


    2 extra features would be great:

    The clear button (x) does not show until a user has actually typed a character in the field
    As you are about to hover/click the (x) button, it should also visually change – maybe go darker

  • Mehdi Jalal 5 June, 2012, 13:45

    Thanks alot

  • Thomas 6 August, 2012, 9:39

    not work if go with autofocus…..

  • Vijay 11 September, 2012, 21:48


    The clear button (x) does not show until a user has actually typed a character in the field.Could you please provide one sample program?


  • Gavin 1 February, 2013, 21:03

    Example doesn’t work ? (IE9)

  • Andrew 2 February, 2013, 6:08

    FYI, you are including jquery-latest.js (1.9.0) and they have removed the .live() event which is breaking your code and demo. Needs to be replaced with .on().

    • Viral Patel 2 February, 2013, 15:35

      Thanks Andrew.. I have fixed the plugin now.

  • Josh 21 February, 2013, 17:10

    Code still doesn’t seem to work (Chrome Latest)
    You need to close


    properly because you put


    I have also no idea why but in the example (downloadable) the icon is not showing (at all).
    I can use your demo that is on the website though!??

  • LouieK 25 February, 2013, 18:45

    I’ve been searching for a way to do this for awhile after I saw the jquery xeditable plugin. I’m too much of a js/jquery noob to try and recreate it from scratch so Thank you for providing the groundwork for me. It’s a great feature to have.

  • Stephan 30 March, 2014, 5:39

    BUT I would like to change a object on the DOM when I click the (X)

  • joeynoindians 25 June, 2014, 23:35


  • Temidayo 31 October, 2014, 14:48

    I created some buttons that has some numbers in them like a number keypad and i also have a textbox on top of it and i wanted to know if there is a java script that i can use that once i click the button that has maybe number 1, then 1 should be shown in the textbox and i also have a button that says “c” which means cancels that once i press it, it deletes or cancels the the number that i pressed before.

  • Pradip Rupareliya 12 November, 2014, 11:16

    thank you so much…

    its become a very helpful to me..

  • Anthony Hunt 16 March, 2015, 16:05

    I added a “trigger” to the line in the .clearlink click event:-


    So that other code was triggered when the field was cleared.

    I also added a hover property to the CSS to make the icon change when highlighted.

    a.clearlink:hover {
    	background: url("close-button.png") no-repeat scroll -24px 0;

    Thanks for the example code. Very helpful.

    • kaartik 3 April, 2015, 21:04

      In chrome, the below line

      $(this).prev().val(”).focus().trigger(“change”); is not working.

      After i use the above code to reset the values, the old entry is coming up on mouse hover and element focus.

      is there anyway to fix this issue?

Leave a Reply

Your email address will not be published. Required fields are marked *


To post source code in comment, use [code language] [/code] tag, for example:

  • [code java] Java source code here [/code]
  • [code html] HTML here [/code]