Entferne das letzte Eingabefeld in der dynamischen Liste mit jQuery

Question

Wie kann ich die letzten <div><input type="text" name="mytext[]"></div> sogar von der "top" -Taste entfernen entfernen? Wenn ich viele Felder erzeuge, wenn ich auf "Glyphon entfernen" klicke, löscht es alle, nicht die letzten.

Wenn ich die Taste Entf auf der rechten Seite des Feldes klicken, wenn ich neue Feld machen es das Feld entfernt, aber ich möchte auch entfernen und von den oberen Knöpfe

<div class="input_fields_wrap"> 
    <button class="add_field_button"> 
     <span class="glyphicon glyphicon-plus"></span> 
    </button> 
    <button class="remove_field" ><span class="glyphicon glyphicon-trash"></span> 
    </button> 
    <div><input type="text" name="mytext[]"></div> 
</div> 

$(document).ready(function() { 
    var max_fields = 10; //maximum input boxes allowed 
    var wrapper = $(".input_fields_wrap"); //Fields wrapper 
    var add_button = $(".add_field_button"); //Add button ID 
    var x = 1; //initlal text box count 
    $(add_button).click(function (e) { //on add input button click 
     e.preventDefault(); 
     if (x < max_fields) { //max input box allowed 
      x++; //text box increment 
      $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">\n\ 
           <button ><span class="glyphicon glyphicon-trash"></button>\n\ 
           </span></a></div>'); //add input box 
     } 
    }); 
    $(wrapper).on("click", ".remove_field", function (e) { //user click on remove glyphicon 
     e.preventDefault(); 
     $(this).parent('div').remove(); 
     x--; 
    }) 
}); 

Answer 1

zu lösen Dies können Sie verwenden . Versuchen Sie folgendes:

$wrapper.on("click", ".remove_field", function(e) { //user click on remove glyphicon 
    e.preventDefault(); 
    $(this).nextAll('div:last').remove(); 
    x--; 
}) 

Working example

Bitte beachte, dass ich die JS geändert leicht an, so dass Sie nicht doppelt Einwickeln Ihre jQuery-Objekte, und ich geändert auch die HTML-leicht, so dass es offensichtlich war, was das war Hinzufügen/Entfernen von Schaltflächen auch ohne Glyphicons zu verwenden.

Answer 2

Sie sollten das letzte Kind dieses Elternteils finden und entfernen.

$(wrapper).on("click", ".remove_field", function (e) { //user click on remove glyphicon 
    e.preventDefault(); 
    $(this).parent().children('div:last-child').remove(); 
    x--; 
})