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() {
    input.replaceWith(input.val('').clone(true));
};


          
        

Comments

  1. User Avatar
    Sreekanth
    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
    Tobias
    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
    dibiler
    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
    niwtsew
    Permalink to comment#

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

  6. User Avatar
    Trevor
    Permalink to comment#

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

  7. User Avatar
    Jesin
    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 – http://jsfiddle.net/jesin/FEKrz/

  8. User Avatar
    Pablo
    Permalink to comment#

    Amazing!

  9. User Avatar
    Ibrahim Islam
    Permalink to comment#

    Awesomeness!

  10. User Avatar
    ETorres
    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
    Stan
    Permalink to comment#

    @Qiasar = you’re the killer :)

  14. User Avatar
    Darbez
    Permalink to comment#

    $(“#clear”).click(function(){
    $(“#control”).val(”);
    });

    Its wrong ????

  15. User Avatar
    Maxmaxmaximus
    Permalink to comment#

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

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

    Clear the form

    $(".user-form").get(0).clear()
    

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.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag