The below code is adding dynamically a html input element[type = file] for selecting another file[without replacing the current one] and displaying the name of selected file, with a remove icon.
On click of remove icon, it should remove the corresponding input element [type = file], input element [displaying name of file] and remove icon.
Suppose if I add 3 files, on click of third remove icon, it should only remove corresponding dynamically added elements.
Please have a look at :
https://codepen.io/Sandipaot123/pen/LLJdeY?editors=1111
$(document).ready(function(){
$(".filetype").change(function(){
var file = this.files;
var nametext =file[0].name;
$(this).parents('.mdl-list__item').find('.mdl-button').append(' <input id="file_input_file2" name="replyfiles2" class="none filetype" type="file"/>');
$(this).parents('.mdl-list__item').find('.attachment_name').append('<input class="file_input_text mdl-textfield__input" type="text" name readonly id="file_input_text" />').append('<span class="mdl-button mdl-js-button mdl-button--colored removeicon"> <i class="material-icons">remove</i> </span>');
$(this).parents('.mdl-list__item').find('.file_input_text').last().val(nametext);
});
$(".removeicon").click(function(){
// 1. remove input which is displaying the name of file
// 2. remove input which is holding the file [input type=file]
// 3. remove the remove icon
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="responseForm" action="#" class="right mdl-form mdl-form-registration demo-registration" >
<div class ="mdl-card mdl-cell mdl-cell--12-col mdl-cell--4-col-tablet mdl-shadow--2dp" >
<ul class="mdl-list">
<li class="mdl-list__item">
<span class="mdl-list__item-secondary-action">
<label class="mdl-button mdl-js-button mdl-button--colored">
<i class="material-icons">file_upload</i>
<input name="replyfiles1" class="none filetype" type="file" />
</label>
</span>
<span class="attachment_name">
</span>
</li>
</li>
</ul>
</div>
</form>
