Clear a File Input

You can just clone it and replace it with itself, with all events still attached.

var input = $("#control");

function something_happens() {



  1. User Avatar
    Permalink to comment#

    Click on Clear button for more than 1 time does n’t work.

  2. User Avatar
    Karan Menon
    Permalink to comment#

    Not working…

  3. User Avatar
    Permalink to comment#

    Same here, the example works only the first time.
    Selecting a different file puts “changed” to the console.log but clicking on the “clear” link does nothing.
    Win7/Chrome 26

  4. User Avatar
    Permalink to comment#

    I believe that it’s not working,because variable “controlBn” is assigned only once (the first time equals $(‘#control’). And as that element is being replaced with a new clone of it, the var “controlBn” may be pointing to an inexistent element after that.
    I would put just :
    $('#clear').on('click' ,function(){
    $('#control').replaceWith( $('#control').val('').clone( true ) );

    rather than the code above
    (just a guess)

  5. User Avatar
    Permalink to comment#

    Though .val(”) works for FF, but it does not work for IE.

    • User Avatar
      Permalink to comment#

      .val(”) does not working in IE11. can we set .value = null; will that work for IE11?

  6. User Avatar
    Permalink to comment#

    Thank you. Just what I needed. Works perfectly ;)

  7. User Avatar
    Permalink to comment#

    @dibiler’s solution works great. The control variable has to be reinitialized inside the click callback function.

    clearBn.on("click", function(){
        var control = $("#control");
        control.replaceWith( control.val('').clone( true ) );

    A working demo is available here –

  8. User Avatar
    Permalink to comment#


  9. User Avatar
    Ibrahim Islam
    Permalink to comment#


  10. User Avatar
    Permalink to comment#

    Hey … it’s great! but not work to FILE type :-(

  11. User Avatar
    Muhamad Risman
    Permalink to comment#

    thank you, very helpful for me :)

  12. User Avatar
    Qaisar Khan
    Permalink to comment#

    I see people complaining about the clear button not working more than once…
    How a about a much simpler solution, such as:

    document.getElementById(“control”).value = “”;

  13. User Avatar
    Permalink to comment#

    @Qiasar = you’re the killer :)

  14. User Avatar
    Permalink to comment#


    Its wrong ????

    • User Avatar
      Permalink to comment#


      wait, are you saying


      is wrong, or are you asking?

      Because I’m asking. Is there anything wrong with doing it this way?

  15. User Avatar
    Permalink to comment#

    ie-8 support, enjoy =) my name is Maxmaxmaximus

    input.value = ''
    input.type = ''
    input.type = 'file'
  16. User Avatar
    Permalink to comment#

    Clear the form

  17. User Avatar
    Matic Pogladič

    Guys, this code works:

    $('#btn-example-file-reset').on('click', function(e){
       var $el = $('#example-file');
  18. User Avatar
    Permalink to comment#

    document.getElementById(“control”).value = “”;

  19. User Avatar
    Jonn Jasper Ejoc

    This works for me


Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.