Löschen Sie das entsprechende Eingabefeld in dynamischer Form (hinzufügen und entfernen)

Question

Ich habe die this code from bootsnipp implementiert. Ich bin in der Lage, die Felder hinzuzufügen und die Schaltfläche dynamisch zu entfernen.

Html Teil

<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 Teil

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

Mein Problem:

nehme ich zweite Eingabefeld hinzufügen, Löschen-Taste erscheint neben dem Eingabefeld. Wenn ich auf die Schaltfläche Löschen klicke, wird das erste Eingabefeld gelöscht. Aber ich möchte eigentlich das zweite Feld bzw. löschen.

Ich habe den Code geschrieben auf this fiddle

Answer 1

Sie können unter Code kopieren und Ersetzen Ihnen alten Code

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

Sie zurück() Selektor Textbox entfernen können.

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