eliminar la fila de la tabla usando jQuery

el código a continuación agrega y elimina la fila de la tabla con la ayuda de Jquery, la función de agregar funciona bien pero la eliminación solo funciona si elimino la primera fila

y el guion

  var i = 1; $("#addbutton").click(function() { $("table tr:first").clone().find("input").each(function() { $(this).val('').attr({ 'id': function(_, id) {return id + i }, 'name': function(_, name) { return name + i }, 'value': '' }); }).end().appendTo("table"); i++; }); $('button.removebutton').on('click',function() { alert("aa"); $(this).closest( 'tr').remove(); return false; }); 

¿Alguien puede darme la explicación de por qué solo puedo eliminar la primera fila? muchas gracias

Debe usar la delegación de eventos porque esos botones no existen en la carga:

http://jsfiddle.net/isherwood/Z7fG7/1/

  $(document).on('click', 'button.removebutton', function () { // <-- changes alert("aa"); $(this).closest('tr').remove(); return false; }); 

Utiliza la delegación de eventos, ya que está creando filas dinámicas.

 $(document).on('click','button.removebutton', function() { alert("aa"); $(this).closest('tr').remove(); return false; }); 

Demo en vivo

Al clonar, de manera predeterminada no clonará los eventos. Las filas agregadas no tienen un controlador de eventos adjunto. Si llamas a clone(true) entonces debería manejarlos también.

http://api.jquery.com/clone/

Una solución simple es encapsular el código del evento de botón en una función y llamarlo cuando agrega TRs también:

  var i = 1; $("#addbutton").click(function() { $("table tr:first").clone().find("input").each(function() { $(this).val('').attr({ 'id': function(_, id) {return id + i }, 'name': function(_, name) { return name + i }, 'value': '' }); }).end().appendTo("table"); i++; applyRemoveEvent(); }); function applyRemoveEvent(){ $('button.removebutton').on('click',function() { alert("aa"); $(this).closest( 'tr').remove(); return false; }); }; applyRemoveEvent(); 

http://jsfiddle.net/Z7fG7/2/

  $(document.body).on('click', 'buttontrash', function () { // <-- changes alert("aa"); /$(this).closest('tr').remove(); return false; }); 

Esto funciona perfectamente, toma no de document.body