如何使用jquery動態添加/刪除文件類型輸入字段？

Question

我無法動態刪除輸入字段，我可以添加字段，但刪除選項不起作用。 我正在使用jquery動態添加/刪除字段和引導3我的佈局。

這裏是我的標記：

<div class="row margin-bottom"> 
     <div class="col-md-12 col-sm-12"> 
      <button type="submit" class="add-box btn btn-info"><span class="glyphicon glyphicon-plus"></span> Add More Fields</button> 
     </div> 
    </div> 
    <?php $attributes = array('class' => 'form-horizontal', 'role' => 'form'); echo form_open_multipart('config/upload_image', $attributes);?> 
     <div class="text-box form-group"> 
      <div class="col-sm-4"><input type="file" class="" name="txtImage[]" id="imageinput"/></div> 
     </div> 
     <div class="form-group"> 
      <div class="col-sm-2"> 
       <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-upload"></span> Upload</button> 
      </div> 
     </div> 
    <?php echo form_close();?> 

這裏是我的jQuery代碼：

 $(document).ready(function(){ 
    $('.add-box').click(function(){ 
     var n = $('.text-box').length + 1; 
     if(n > 5) 
     { 
      alert('Only 5 Savy :D'); 
      return false; 
     } 
     var box_html = $('<div class="text-box form-group"><div class="col-sm-4"><input type="file" class="" name="txtImage[]" id="imageinput'+ n +'"/></div><div class="col-sm-2"><button type="submit" class="remove-box btn btn-danger btn-sm"><i class="fa fa-minus-circle fa-lg"></i></button></div></div>'); 
     $('.text-box:last').after(box_html); 
     box_html.slidedown('slow'); 
    }); 

    $('.form-horizontal').on('click', '.remove-box', function(){ 
      $(this).parent().remove(); 
     return false; 
    }); 

}); 

Answer 1

的錯誤是在刪除按鈕單擊事件處理程序。您需要刪除最接近的形式組，而不是直接父：

$('.form-horizontal').on('click', '.remove-box', function(){ 
    $(this).closest(".form-group").remove(); 
    return false; 
}); 

檢查這個bootply的工作例如：http://www.bootply.com/x8n3dQ6wDf

編輯

上刪除您可以使用jQuery的效果基本show動畫像這樣：

$('.form-horizontal').on('click', '.remove-box', function(){ 
    var formGroup = $(this).closest(".form-group"); 
    formGroup.slideUp(200, function() { 
     formGroup.remove(); 
    }); 
    return false; 
});