1

我有一个表单，用户可以在其中添加要上传的文件。该输入上的更改事件会添加相同类型的新输入，依此类推。但是新的输入必须有“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 中准备这个示例，但我无法完成这项工作。无论如何，这可能会有所帮助。

4

1 回答 1

2

将“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/

于 2013-04-19T12:25:13.210 回答