通过jquery

Question

下面的代码动态添加一个html输入元素[type = file]，用于选择另一个文件[不替换当前文件]并显示所选文件的名称，并带有删除图标。

点击删除图标，它应删除相应的输入元素[type = file]，输入元素[显示文件名]并删除图标。

假如我添加3个文件，点击第三个删除图标，它应该只删除相应的动态添加元素。

请看一下：

https://codepen.io/Sandipaot123/pen/LLJdeY?editors=1111

＆＃13;

＆＃13;

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

＆＃13;

<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> 

 

＆＃13;

＆＃13;

＆＃13;