Clear last file input onclick

Question

I have a form with a file input and 2 text boxes. All 3 inputs can be duplicated if more than one file needs to be uploaded. I am trying to add a clear button at the end of every div that will allow the user to clear the value of the file input. But for the life of me I cannot get it to work.

I am trying to use .last() but it doesn't seem to be selecting the last file input once the div has been duplicated.

My code is below.

<div class="certificates_list">
    <input type="file" name="user_certificates[]" class="user_certificate" />
    <input type="text" name="certificate_name[]" class="right certificate_name" placeholder="Certificate name" />
    <input type="text" name="expiry_date[]" class="expiry_date" placeholder="DD/MM/YYYY" />
    <button class="clear_certificate">Clear</button>
</div>

$(function() {
    $('.clear_certificate').click(function(event) {
    event.preventDefault();
    $('input[type="file"].user_certificate').last().val('');

    });
});

If I just have one div with inputs it clears it fine. Once the div has been duplicated the previous div won't clear anymore.

Any ideas? Thank you for any help, much appreciated!

EDIT

I have created a jsfiddle with my problem, hope this helps

What are you duplicating exactly? Sounds like you need to use .on() instead of .click() for the event, because it only registers what's already loaded in the DOM and not future elements. — casraf
– casraf, Commented Jun 25, 2013 at 13:00
I meant div, it is styled as a row on my screen. My bad. Updated my question — Pooshonk
– Pooshonk, Commented Jun 25, 2013 at 13:16
Look a example w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_reset — KingRider
– KingRider, Commented Apr 28, 2017 at 11:36

Atrox111 · Accepted Answer · 2013-06-25 14:10:28Z

1

HTML-CODE:

<div class="certificates_list">
    <input type="file" name="user_certificates[]" class="user_certificate" id="user_certificate_0" />
    <input type="text" name="certificate_name[]" class="right certificate_name" placeholder="Certificate name" id="certificate_name_0" />
    <input type="text" name="expiry_date[]" class="expiry_date" id="expiry_date_0" placeholder="DD/MM/YYYY" />
    <button id="clear_certificate_0" class="clear_certificate">Clear</button>
</div>
<div id="certificates_new"></div>
<p><button type="button" id="add_certificate">Add another certificate</button></p>

JS:

var i = 1;

$('#add_certificate').click(function(){
    var sHtml = '<input type="file" name="user_certificates[]" class="user_certificate" id="user_certificate_'+i+'" />';
    sHtml +=    '<input type="text" name="certificate_name[]" class="right certificate_name" placeholder="Certificate name" id="certificate_name_'+i+'" />';
    sHtml +=    '<input type="text" name="expiry_date[]" class="expiry_date" placeholder="DD/MM/YYYY" id="expiry_date_'+i+'" />';
    sHtml +=    '<button class="clear_certificate" id="clear_certificate_'+i+'">Clear</button>';
    $('#certificates_new').append(sHtml);
    i++;
});

$(document).on("click", '.clear_certificate', function() {
    var arrID = $(this).attr("id").split("_");
    var ID = arrID[2];
    $('#user_certificate_'+ID).val('');
    $('#expiry_date_'+ID).val('');
    $('#certificate_name_'+ID).val('');
});

So now this should work fine... You should make improvements on the code to shorten it a bit but the functionality is given.

edited Jun 25, 2013 at 14:10

answered Jun 25, 2013 at 13:09

Atrox111

5274 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Atrox111 Over a year ago

Are you using the latest jQuery version? Or getting any error?

Pooshonk Over a year ago

Yup the latest version, and no i'm not getting any errors at all

Atrox111 Over a year ago

And would it be an option to set up a counter (var i = 1) and add an id (i.e. "user_certificate_"+i) to every added input field so you can select the latest by its id? Know what I try to say? :)

Atrox111 Over a year ago

And proof wether the onclick function gets called. Maybe it never gets called

Pooshonk Over a year ago

Updated my question with a jsfiddle

|

momo · Accepted Answer · 2013-06-25 13:05:37Z

0

you write [type="file"] only match type="file" your html only have one file input

answered Jun 25, 2013 at 13:05

momo

1851 silver badge6 bronze badges

1 Comment

Pooshonk Over a year ago

As I said in my question the inputs get duplicated when a button is clicked. I didn't include it in my question as I didn't think it was relevant

reggaemahn · Accepted Answer · 2013-06-25 13:29:28Z

0

This should accomplish what you are trying to do:

$(".clear_certificate").click(function(){
   $(".certificates_list").children("input[type=file]:last-child").each(function(){
         // Do stuff here
   });
});

It would be best to give your wrapper div an id and then do $("#idOfDiv").children....

answered Jun 25, 2013 at 13:29

reggaemahn

6,7286 gold badges39 silver badges64 bronze badges

1 Comment

Pooshonk Over a year ago

Updated my question with a jsfiddle

Collectives™ on Stack Overflow

Clear last file input onclick

3 Answers 3

7 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related