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'字符后的所有字段。我想要做的是只删除下一个输入字段。

我尝试准备this example in jsFiddle，但我无法做到这一点。无论如何，这可能会有所帮助。

Answer 1

将“div”标签放在“p”标签内是主要问题

删除已在此代码中更正

注意：在您的html代码中，“ div ”是在“ p ”标记内添加的，这是无效的做法

HTML：

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

脚本：

$('body')
    .delegate('#upload_form input[type="file"]', 'change', inputChanged)
    .delegate('#upload_form .icon', 'click', removeField);

function inputChanged() {

    $current_count = $('#upload_form input[type="file"]').length;
    $next_count = $current_count + 1;
    $(this).closest('.p_file').after(
            '<div class="p_file" ><div class="icon">X</div>' +
            '<input type="file" name="userfile'
            + $next_count + '" size="40" /></div>');
}

function removeField(){
    $(this).closest('.p_file').remove();
    return false;
}

链接：http://jsfiddle.net/cBrQX/2/

动态删除动态添加的输入（type = file）

1 个答案: