Question

我已经实施了this code from bootsnipp。我可以添加字段以及动态删除按钮。

Html Part

<div class="form-group">
    <input type="hidden" name="count" value="1" />
    <label class="control-label col-md-2 col-sm-2 col-xs-12" for="image">Inclusion
    </label>
    <div class="col-md-5 col-sm-5 col-xs-12">
        <input type="hidden" name="icount" value="1" />
        <div id="i_field" class="form-group">
            <input class="form-control" id="ifield1" name="inclusion[]" type="text" style="width: 89%">
            <button id="b1" class="btn btn-info i_add_more" type="button">Add More</button>
        </div>
    </div>
</div>

JS Part

var inext = 1;
    $(".i_add_more").click(function(e){
        // e.preventDefault();
        var iaddto = "#ifield" + inext;
        var iaddRemove = "#ifield" + (inext);
        inext = inext + 1;
        var inewIn = '<input type="text" class="form-control" id="ifield' + inext + '" name="inclusion[]" style="width: 89%">';
        var inewInput = $(inewIn);
        var iremoveBtn = '<button id="iremove' + (inext - 1) + '" class="btn btn-danger i_remove_me pull-right" >-</button>';
        var iremoveButton = $(iremoveBtn);
        $(iaddto).after(inewInput);
        $(iaddRemove).after(iremoveButton);
        $("#i_field" + inext).attr('data-source',$(iaddto).attr('data-source'));
        $("#icount").val(inext);

        $('.i_remove_me').click(function(e){
            e.preventDefault();
            var ifieldNum = this.id.charAt(this.id.length-1);
            var ifieldID = "#ifield" + ifieldNum;
            $(this).remove();
            $(ifieldID).remove();
        });
    });

我的问题：

假设我添加了第二个输入字段，输入字段旁边会出现删除按钮。当我单击删除按钮时，将删除第一个输入字段。但我实际上想分别删除第二个字段。

我已将代码发布在this fiddle

上

Answer 1

$(this).closest('div').find('input').remove();

Answer 2

Working Fiddle

您可以使用prev（）选择器删除文本框。

$(this).prev().remove();

Answer 3

您可以使用以下代码复制并替换旧代码

var inext = 1;
$("body").on('click','.i_add_more',function(e){
    // e.preventDefault();
    console.log(inext);
    var iaddto = "#ifield" + inext;
    var iaddRemove = "#ifield" + (inext);
    inext = inext + 1;
    var inewIn = '<input type="text" class="form-control" id="ifield' + inext + '" name="inclusion[]" style="width: 89%">';
    var inewInput = $(inewIn);
    var iremoveBtn = '<button id="iremove' + (inext) + '" class="btn btn-danger i_remove_me pull-right" >-</button>';
    var iremoveButton = $(iremoveBtn);
    $(iaddto).after(inewInput);
    $(iaddRemove).after(iremoveButton);

    $("#icount").val(inext);

    $('body').on('click','.i_remove_me',function(e){
        e.preventDefault();
        var ifieldNum = this.id.charAt(this.id.length-1);
        var ifieldID = "#ifield" + ifieldNum;
        console.log(ifieldID);
        if(inext > 1 ) {
          inext =  inext - 1;
        }else {
          inext = 1;
        }

        console.log(this);
        $(this).remove();
        $(ifieldID).remove();
    });
});

以动态形式删除相应的输入字段（添加和删除）

3 个答案: