动态添加/删除输入类型文件（浏览器字段）

Question

我有一个输入类型文件字段，并且附近有一个标签，例如“添加更多”，这是一个超级链接。 单击此超级链接时，它应该创建另一个输入类型文件字段。 一旦创建了另一个输入类型的文件字段，应该有类似“删除”的链接，单击此链接将仅删除相应的文件字段。

请注意，添加此文件字段没有限制，但是在最坏的情况下，我最多会增加10个文件字段。 我的意思是说应该没有条件检查它是否达到最大限制。

您可以在这里看到我的代码。 http://jsfiddle.net/inDiscover/6hVkw/

HTML

<table>
<tr id="bkup_doc_rw">
<td align="right"><label class="letter_font" for="bkup_doc_proof">Document &nbsp;&nbsp;&nbsp;&nbsp;:</label></td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;<input type="file" name="bkup_doc_proof" id="bkup_doc_proof" required/>&nbsp;&nbsp;&nbsp;<a class="letter_font" style="text-decoration:none;cursor:pointer;" href="#" id="addNew">Add more </a>
</td>
</tr> 
</table> 

JQUERY

var fle_cnt = 1;
$('#addNew').click(function() {
fle_cnt++;
event.preventDefault ? event.preventDefault() : event.returnValue = false;  
$('#bkup_doc_rw').after('<tr><td>&nbsp;</td><td>&nbsp;&nbsp;&nbsp;&nbsp;
<input   type="file" name="bkup_doc_proof" id="bkup_doc_proof_'+fle_cnt+'">&nbsp;&nbsp;&nbsp;&nbsp;<a class="letter_font" style="text-decoration: none;cursor: pointer;" href="#" id="remNew">Remove</a></td></tr>');
return false;
});

$(document).on('click', '#remNew', function() {
event.preventDefault ? event.preventDefault() : event.returnValue = false;
$('#remNew').parents('tr').remove();    
return false;   
});

这里的问题是，当我尝试点按“删除”标签时，它没有删除相应的文件字段，而是随机删除了。 我知道此问题正在发生，因为删除文件时我没有使用唯一ID（file_cnt）。

谁能帮助我以一种更好的方式修改我的代码来实现这一目标。

Answer 1

尝试这个：

   var fle_cnt = 1;
   $('#addNew').click(function (event) {
       fle_cnt++;
       event.preventDefault();
       $('#bkup_doc_rw').after('<tr><td>&nbsp;</td><td><input type="file" name="bkup_doc_proof" id="bkup_doc_proof_' + fle_cnt + '"><a class="letter_font remNew" style="text-decoration: none;cursor: pointer;" href="#">Remove</a></td></tr>');
   });

   $(document).on('click', '.remNew', function (event) {
       event.preventDefault();
       $(this).closest('tr').remove();
   });

变化：

1. 在#addNew点击将事件传递到回调中。
2. 将id属性更改为class 。
3. 代替id选择器，更改为类选择器.remNew 。
4. 而不是$('#remNew')将上下文选择器放置为$(this) 。
5. 在.remNew的click事件的回调中.remNew事件
6. 您不需要使用return false; 因为您已经在使用event.preventDefault(); 如果您如上所述在回调中传递事件，它将起作用。
7. 而不是.parents()使用.closest()进行遍历。

演示@更新的小提琴。

Answer 2

#remNew为什么！
ID是唯一的。

$('#remNew').parents('tr').remove();
至
$(this).parents('tr').remove();

Answer 3

尝试一下：

$(document).on('click', 'a.letter_font', function() {
    event.preventDefault ? event.preventDefault() : event.returnValue = false;
    $(this).parents('tr').remove(); 
    return false;   
});

在click事件中使用$（this）。 这样，您可以管理触发事件的确切对象。

Answer 4

HTML页面必须具有ID的唯一性。 将remNew一类，就可以了：

的jsfiddle

Answer 5

var fle_cnt = 1;
$('#addNew').click(function() {
    fle_cnt++;
    event.preventDefault ? event.preventDefault() : event.returnValue = false;  
    $('#bkup_doc_rw').after('<tr><td>&nbsp;</td><td>&nbsp;&nbsp;&nbsp;&nbsp;<input type="file" name="bkup_doc_proof" id="bkup_doc_proof_'+fle_cnt+'" />&nbsp;&nbsp;&nbsp;&nbsp;<a class="letter_font remNew" style="text-decoration: none;cursor: pointer;" href="#" >Remove</a></td></tr>');
    return false;
});

$(document).on('click', '.remNew', function() {
    event.preventDefault ? event.preventDefault() : event.returnValue = false;
    $(this).closest("tr").remove();
    return false;   
});

您使用id =“ remNew”时，切勿使用多个id-它们专门用于创建唯一标识，对于具有类似属性的DOM元素，我们始终使用类-因此我将id替换为class =“ remNew”

在单击某些元素时，我们可以使用此实例检测到它，并使用jquery 最接近删除特定的tr标记

Answer 6

将remNew作为课程，您也可以尝试这种方式

 `http://jsfiddle.net/MRqN4/`