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

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

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

你可以在这里看到我的代码

HTML

文件：

JQUERY

var fle_cnt=1；
$（'#addNew'）。单击（函数（）{
fle_cnt++；
event.preventDefault？event.preventDefault（）：event.returnValue=false；
$（'bkup_doc_rw'）。在（'
');
返回false；
});
$（文档）。在（'click'，'#remNew'，函数（）上{
event.preventDefault？event.preventDefault（）：event.returnValue=false；
$（'#remNew'）.parents（'tr'）.remove（）；
返回false；
});

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

有谁能帮助我以更好的方式修改代码以实现这一点。

\remNew

这就是为什么
ID意味着是唯一的

$（'#remNew'）.parents（'tr'）.remove（）

到

$（this.parents（'tr'）.remove（）
请尝试以下操作：

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

在click事件中使用$（this）。通过这种方式，您可以管理触发事件的确切对象
 试试这个：

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

var fle_cnt=1；
$（'#addNew'）。单击（函数（事件）{
fle_cnt++；
event.preventDefault（）；
$（'bkup_doc_rw'）。在（''）之后；
});
$（文档）.on（'单击'，'.remNew'，函数（事件）{
event.preventDefault（）；
$（this）.closest（'tr'）.remove（）；
});

变化：

在
#addNew
中，单击回调中的传递事件
将
id
属性改为
class
将id选择器改为类选择器
.remNew
将上下文选择器放置为
$（this）
，而不是
$（'#remNew'）
在
.remNew
的单击事件的回调中传递事件
您不需要使用
返回false因为您已经在使用
事件.preventDefault（）
并且如果您在回调中传递事件（如上所述），它将起作用

不要使用
.parents（）
而使用
最接近的（）
向上遍历
HTML页面必须具有唯一的ID。让
remNew
成为一门课，你就没事了：

变量fle\u cnt=1；
$（'#addNew'）。单击（函数（）{
fle_cnt++；
event.preventDefault？event.preventDefault（）：event.returnValue=false；
$（'bkup_doc_rw'）。在（''）之后；
返回false；
});
$（文档）.on（'单击'，'.remNew'，函数（）{
event.preventDefault？event.preventDefault（）：event.returnValue=false；
$（this）.tr.remove（）；
返回false；
});

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

单击一些元素，我们可以使用这个实例检测它，使用jquery最近的删除特定的tr标记将remNew作为类，您也可以尝试这种方法

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

！？还有CSS和
页边空白
；）我这里有两个问题。1] 如果我在回调函数中传递事件，并且使用event.preventDefault（），那么我不需要使用“return false”，对吗？？。否则我需要使用。正确的？？2] 为什么我需要将id属性更改为类？？？。如果我使用id属性，它也会正常工作？？有什么具体原因吗。3] 我还想知道为什么最近的（）而不是父（）。@user3742125对于[1]请参见
返回false执行两件事：a）防止默认行为和b）停止dom中的bubbleup事件。因此，如果不需要停止事件冒泡，则不应使用，否则
返回false很好。现在[2]您必须为每个元素指定唯一的ID，如果您不这样做，那么只有第一个元素才是获取事件的元素。或者我必须说，这使得针对w3c建议的标记无效。我指的是你的引文“如果你不这样做，那么只有第一个元素会得到事件”。您所说的获取事件的第一个元素是什么意思。这里你给了一个公共类，我给了一个公共id，前提是我没有在任何地方使用这个id。或者这只是一个要遵循的标准。请看，相同的id不是很好的做法，遵循id应该在单个页面中每个元素都是唯一的。对于选择器集合，您可以使用classname，它可以应用于单个页面中的多个元素，并且是有效的选择器和有效的标记。请注意，如果要使应用程序跨浏览器兼容，单个页面中的相同ID可能会引发问题，因为所有浏览器都有自己的dom api实现，所以建议使用类名。
   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();
   });

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

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