javascript - 動的に追加された入力 (type=file) を動的に削除する

Question

ユーザーがアップロードするファイルを追加できるフォームがあります。その入力のイベントを変更すると、同じタイプの新しい入力が追加されます。ただし、新しい入力には、入力フィールドと X 文字を削除できるように、クリック イベントが付加された「X」文字が必要です。

フォーム：

  <form id="upload_form">
     <div class="p_file">
        <p class="icon">X</p>
        <input type="file" name="userfile1" size="40"  class="required"  />
     </div>
  </form>

そしてJavaScript：

   $('#upload_form input[type="file"]').change(function(){
       addUploadField($(this));
   });  

   function addUploadField($field)
   {
       $current_count = $('#upload_form input[type="file"]').length
       $next_count = $current_count + 1;
       $field.parent('p').after('
            <div class="p_file" >
                <p class="icon">X</p>
                <input type="file" name="userfile'+$next_count+'" size="40" />
            </div>
        ');
        $field.unbind('change');
        $nextField = $('#upload_form input[type="file"]').last(); 
        $nextField.bind('change',function(){
        addUploadField($(this));
     });

     $("#upload_form .icon").on('click',function(){
         removeUploadField($field);
     });
   }

 function removeUploadField($field)
 {
     $field.parent('p').remove();
 }

上記のコードは、クリックされた「X」文字の後のすべてのフィールドを削除します。私がやりたいことは、次の入力フィールドだけを削除することです。

この例を jsFiddleで準備しようとしましたが、うまくいきません。とにかくこれが役立つかもしれません。