Fehler beim Entfernen divs dynamisch

Question

Ich versuche, 3 Felder dynamisch (2 Textfelder und 1 Entfernen-Schaltfläche) pro Zeile hinzuzufügen. Die Schaltfläche zum Hinzufügen funktioniert einwandfrei. Das Problem ist die Entfernungsfunktion. Wenn ich zwei Felder hinzufügen oder mehr, und ich versuche, die ersten zu entfernen, beide hinzugefügten Felder/Zeilen

gelöscht

Dies ist mein HTML-Code:

<script type="text/javascript"> 
$(document).ready(function(){ 
    var maxField = 10; //Input fields increment limitation 
    var addButton = $('.add_button'); //Add button selector 
    var wrapper = $('.field_wrapper:last'); //Input field wrapper 
    var wrapper_delete = $('.field_wrapper'); 

    //var fieldHTML = '<div><input type="text" name="field_name[]" value=""/><a href="javascript:void(0);" class="remove_button btn btn-danger2" title="Remove field">Remover</a></div>'; //New input field html 
    var fieldHTML = '<div class="field_wrapper form-group col-sm-12"><div class="form-group col-sm-4"><input type="text" name="id[]" value="" class="form-control"/></div><div class="form-group col-sm-4"><input type="text" name="name[]" value="" class="form-control"/></div><div class="form-group col-sm-4"><a href="javascript:void(0);" class="remove_button btn btn-danger2" title="Add field"><i class="fa fa-trash-o"></i></a></div></div>'; //New input field html 
    var x = 1; //Initial field counter is 1 
    $(addButton).click(function(){ //Once add button is clicked 
     wrapper = $('.field_wrapper:last'); //Input field wrapper 
     if(x < maxField){ //Check maximum number of input fields 
      x++; //Increment field counter 
      var count = $('.field_wrapper').length; 
      fieldHTML = '<div class="field_wrapper form-group col-sm-12"><div class="form-group col-sm-4"><input type="text" name="id_'+ count +'" value="" class="form-control"/></div><div class="form-group col-sm-4"><input type="text" name="name_' + count +'" value="" class="form-control"/></div><div class="form-group col-sm-4"><a href="javascript:void(0);" class="remove_button btn btn-danger2" title="Add field"><i class="fa fa-trash-o"></i></a></div></div>'; //New input field html 
      $(wrapper).append(fieldHTML); // Add field html 

     } 
    }); 

    $(wrapper_delete).on('click', '.remove_button', function(e){ //Once remove button is clicked 
     wrapper_delete = $('.field_wrapper'); 
     e.preventDefault(); 
     $(this).closest('.field_wrapper').remove(); 
     x--; //Decrement field counter 
    }); 
}); 
</script> 

:

<div class="col-lg-12"> 

    <div class="field_wrapper form-group col-sm-12"> 
     <div class="form-group col-sm-4"> 
      <input type="text" name="id[]" value="" class="form-control"/> 
     </div> 
     <div class="form-group col-sm-4"> 
      <input type="text" name="name[]" value="" class="form-control"/> 
     </div> 
     <div class="form-group col-sm-4"> 
      <a href="javascript:void(0);" class="add_button btn btn-primary" title="Add field">Adicionar Valor</a> 
     </div> 
    </div> 

</div> 

Dies ist die Javascript ist

Wie kann ich das beheben?

Answer 1

Sie fügen das neue Element field_wrapper an field_wrapper:last an. Sie sollten es nach platzieren, so dass Sie statt .append().after() verwenden sollten.

$(wrapper).after(fieldHTML); // Add field html 

und Delegierter Click-Ereignis auf document (oder am nächsten statischen Vorfahren), weil .field_wrapper Element auch dynamicaly hinzugefügt wird, und Sie können nicht Ereignis daran binden.

$(document).on('click', '.remove_button', function(e){ 

JSFiddle

---

Blick auf das, was Sie zu tun versuchen. Ich würde empfehlen, .clone([with events]) zu verwenden. Sie müssen die Namen input nicht wirklich ändern (es sei denn, der Grund ist anders als die Vermeidung von Namensduplikaten), da sie auf Arrays festgelegt sind.
Auf diese Weise konnten alle Ihren Code so einfach sein wie unten:

$('.add_button').click(function(){ 
    $('.field_wrapper').length >= maxField || 
    wrapper.clone(true).find('a.btn').toggle().end().insertAfter('.field_wrapper:last'); 
}); 

$('.remove_button').hide().click(function(){ 
    $(this).closest('.field_wrapper').remove(); 
}); 

var maxField = 10, wrapper = $('.field_wrapper').clone(true); 

JSFiddle