dynamically add/remove input type file (browser field)

Question

I have a input type file field and there is a label near this like "Add more",this is a hyper link. While clicking on this hyper link it should create another input type file field. Once it is created an another input type file field there should be link like "Remove", clicking on this link will remove the corresponding file field only.

Note that there is no limit of adding this file fields, but in worst case I will upto 10 file fields maximun. I meant to say there should be no condition to check whether it reached the maximum limit.

You can see my code here. 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;   
});

Here issue is when I tried to clike on "Remove" label it is not removing the corresponding file field instead it is removing randomly. I know this issue is happening because I am not using unique ID (file_cnt) while deleting a filed.

Can any one help me to modify my code in a better way to achieve this.

Answer 1

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

changes:

1. in the #addNew click pass the event in the callback.
2. change the id attribute to class instead.
3. instead of id selector change to the class selector .remNew .
4. instead of $('#remNew') place the context selector as $(this) .
5. pass the event in the callback of .remNew 's click event
6. You don't need to use return false; as you are already using event.preventDefault(); and it would work if you pass the event in the callback as mentioned above.
7. and instead of .parents() use .closest() to traverse up.

Demo @ updated fiddle.

Answer 2

#remNew That why !
IDs are mean to be unique.

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

Answer 3

htry this:

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

inside the click event use $(this). this way you can manage the exact object which triggered the event.

Answer 4

HTML pages must have the ID's unique. Make the remNew a class and you're fine:

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

You were using id = "remNew", should never use multiple id's - they are used specially to create unique identification, for DOM elements with similar property we always use classes - so i replaced id with class = "remNew"

on click on some elements we able to detect it using this instance , and the use jquery closest to delete specific tr tag

Answer 6

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

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