javascript - 动态添加/删除输入类型文件(浏览器字段)

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. 将上下文选择器设置为 $(this)，而不是 $('#remNew')。
5. 在.remNew的点击事件回调中传递该事件
6. 您不需要使用 return false; 因为您已经在使用 event.preventDefault(); 并且如果您在回调中传递事件，它就会起作用如上所述。
7. 使用 .closest() 代替 .parents() 向上遍历。

Demo @ updated fiddle.