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

Question

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

HTML部分

<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部分

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

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

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

Answer 2

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

Answer 3

Working Fiddle

的代码，你可以使用上一个（）选择删除文本框。

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