以動態形式刪除相應的輸入字段（添加和刪除）

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