HTML

Question

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

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

您可以在此处查看我的代码。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();
   });

的变化：

在#addNew点击中传递了回调中的事件。
将id属性更改为class。
而不是id选择器更改为类选择器.remNew。
而不是$('#remNew')将上下文选择器设置为$(this)。
在.remNew点击事件
您不需要使用return false;，因为您已经在使用event.preventDefault();，如果您在回调中传递事件，它将会起作用。
而不是.parents()使用.closest()来遍历。

Demo @ updated fiddle.

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

点击事件中的

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

Answer 4

HTML网页必须具有ID唯一的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元素，我们总是使用类 - 所以我用class =“remNew”

替换了id

点击我们能够使用此实例检测到的一些元素，并使用jquery 最近删除特定的tr标记

Answer 6

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

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

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

HTML

JQUERY

6 个答案:

Demo @ updated fiddle.