Javascript 如何使用jquery动态添加/删除文件类型输入字段？

我无法动态删除输入字段，我可以添加字段，但我的删除选项不起作用。 我使用jquery动态添加/删除字段，使用bootstrap3进行布局

这是我的标记：

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

});

$（文档）.ready（函数（）{
$（'.add box'）。单击（函数（）{
var n=$（'.text box'）。长度+1；
如果（n>5）
{
警报（“仅5个Savy:D”）；
返回false；
}
var box_html=$（''）；
$（'.text box:last'）。在（box_html）之后；
box_html.slidedown（'slow'）；
});
$（'.form horizontal'）。在（'click'，'remove box'，function（）上{
$（this.parent（）.remove（）；
返回false；
});
});

错误在删除按钮单击事件处理程序中。您需要删除最近的表单组，而不是直接的父级：

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

检查此引导层以了解工作示例：

编辑

对于移除时的动画，可以使用jQuery slideUp，如下所示：

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

---

@它很好用，谢谢你。您能告诉我是否需要添加和删除的slideIn和Slideup效果吗？我如何才能做到这一点。@您可以使用jQuery Slideup和slideDown函数来做到这一点。我将更新我的答案，以给出一个关于删除的slideUp示例。@ChaoticNadris很好，再次感谢，但在我的添加选项中，它不起作用，我的意思是slideDown不起作用，但完美地删除了工作。