Agregar <tr> a una tabla dinamicamente (problema con contador)

[xalupeao]

Estimados,

Estoy generando una tabla y le estoy dando la opcion al usuario de agregar màs filas si es que las requiere.

Estoy generando el codigo y funciona. El problema esta que cuando borro una fila el contador de filas funciona de manera incorrecta.

Lo que pasa en lo siguiente. tengo un evento click en una clase .addnew esta clase se genera a partir del html inicial. Luego cada vez que se da click en .addnew se genera dinamicamente un <tr> en el cual se reemplaza esta clase .addnew por .remove. La clase .remove tiene como funcion borrar el <tr> segun corresponde (esto lo hace). El problema esta que cada vez que se hace click en un .remove el codigo se ejecuta más de una vez (se ejecuta por cada .remove que existe).

Código Javascript:

$('.addnew').click(function(e) {
   //codigo para copiar el tr --> ver en http://jsfiddle.net/REk5r/1/
 
   $('.remove').on('click', function(e) {
      e.preventDefault();
      $(this).parent().parent().remove();
      console.log('click');
   })
});
 

Pueden replicar el problema asi
Ingresan a http://jsfiddle.net/REk5r/1/
Le dan a "Agregar" en tabla 2 veces y luego le dan a borrar y luego nuevamente a agregar, veran que el numero de la fila cambia a un numero negativo.


Espero que me puedan ayudar.

[sander]

Tu problema es solo ver con un poco de lógica: cada ves que creas una nueva fila esta se creara con la función de remover, cuando vuelves agregar otra fila, pues tomas la ultima y la vuelves a generar incluido la función de remover y nuevamente le agregas otra función para remover.. y así correlativamente, la cuarta ves que agregues tendrás 4 veces ejecutandose la función remover.

Te aconsejo dos soluciones:

1.- Copia siempre de la primera fila no de la ultima.
2.- Saca esa función que esta dentro del copiado y ponlo fuera.

Saludos.