Question

我有一个带有文件输入和2个文本框的表单。如果需要上传多个文件，则可以复制所有3个输入。我试图在每个div的末尾添加一个清除按钮，允许用户清除文件输入的值。但是对于我的生活，我无法让它发挥作用。

我正在尝试使用.last()，但是一旦重复了div，它似乎没有选择最后一个文件输入。

我的代码如下。

<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('');

    });
});

如果我只有一个带输入的div，它会清除它。一旦div被复制，之前的div将不再清除。

有什么想法吗？感谢您的帮助，非常感谢！

修改

我已经根据我的问题创建了jsfiddle，希望这会有所帮助

Answer 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('');
});

所以现在这应该可以正常工作......你应该对代码进行改进以缩短它，但是给出了功能。

Answer 2

你写[type =“file”]只匹配type =“file” 你的html只有一个文件输入

Answer 3

这应该完成你想要做的事情：

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

最好给你的包装div一个id，然后做$（“＃idOfDiv”）。children ....

清除上次文件输入onclick

3 个答案: