清除最後一個文件輸入onclick

我有一個帶有文件輸入和2個文本框的窗體。如果需要上傳多個文件，則所有3個輸入都可以被複制。我試圖在每個div末尾添加一個清除按鈕，以便用戶清除文件輸入的值。但對於我的生活，我無法實現它的工作。清除最後一個文件輸入onclick

我想使用.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，希望這有助於

來源

2013-06-25 Pooshonk

你準確地複製了什麼？聽起來你需要使用['.on（）']（http://api.jquery.com/on/）而不是'.click（）'作爲事件，因爲它只記錄已經加載到DOM中的內容而不是未來的元素。 – casraf

你是什麼意思行？ – Muath

我的意思是div，它在我的屏幕上被設計爲一排。我的錯。更新我的問題 – Pooshonk

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

所以現在這應該工作得很好......你應該對代碼進行改進以縮短它，但功能被給出。

來源

2013-06-25 13:09:01 Atrox111

不，這不起作用，該死 – Pooshonk

你使用最新的jQuery版本嗎？或者得到任何錯誤？ – Atrox111

是最新版本，不，我沒有得到任何錯誤 – Pooshonk

你寫[類型=「文件」]只匹配類型=「文件」你的HTML只有一個文件輸入

來源

2013-06-25 13:05:37 areschen

正如我在我的問題中所說的，當單擊一個按鈕時輸入會被複制。我沒有將它包含在我的問題中，因爲我認爲它不相關 – Pooshonk

這應該完成什麼你正在嘗試做的：

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

這將是最好的給你包裝的div一個id，然後做$（「＃idOfDiv」）的孩子....

。

來源

2013-06-25 13:29:28

用jsfiddle更新了我的問題 – Pooshonk

清除最後一個文件輸入onclick

回答

相關問題