Supprimer le champ de saisie correspondant sous forme dynamique (ajouter et supprimer)

Question

J'ai implémenté le this code from bootsnipp. Je suis capable d'ajouter les champs ainsi que de supprimer le bouton dynamiquement.

Html partie

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

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

Mon problème:

Supposons que j'ajouter second champ d'entrée, le bouton Supprimer apparaît à côté du champ de saisie. Lorsque je clique sur le bouton Supprimer, le premier champ de saisie est supprimé. Mais je veux réellement supprimer le deuxième champ et respectivement.

J'ai posté le code sur this fiddle

Answer 1

Vous pouvez utiliser ci-dessous copie de code et vous remplacer l'ancien 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

Vous pouvez utiliser sélecteur prev() pour supprimer zone de texte.

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