それぞれの入力フィールドを動的フォームで削除（追加と削除）

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

私の問題：

ボタンは、入力フィールドの横に表示され、削除、私は2番目の入力フィールドを追加したとします。削除ボタンをクリックすると、最初の入力フィールドが削除されます。しかし、私は実際に2番目のフィールドを削除したいと思います。

は、私はあなたがテキストボックスを削除するにはPREV（）セレクタを使用することができます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();