I have the following code:
$(document).ready( function(){
tabla = $('#tabla_sel');
tr = $('tr:first', tabla);
$('#addF').on('click', function (){
tr.clone().appendTo(tabla).find(':text').val('');
});
$(".eliminarFila").on('click', function (){
$(this).closest('tr').remove();
});
});
HTML TABLE:
<input type="button" value="" class="add_btn" id="addF">
<input type="button" value="" class="eliminarFila">
<table>
<tbody id="tabla_sel" style="padding: 5px">
<tr>
<td>Fila</td>
</tr>
</tbody>
</table>
I use this code to clone as many as I need from a table <tr>
, but when I want to delete each <tr>
one created, it does not perform any function for me.
Let's imagine that your table is this:
Based on your JS:
The
closset
jQuery function returns the first ancestor of<span>
that is inside an element<ul>
, which doesn't work for you.NOTE: I only used the .removeRow button since that is the one you were having trouble with.
I hope it helps
Reviewing your jQuery code , in the delete function you make reference to the this element but this corresponds to the input with the deleteFila class and the correct thing is to point to the table , also in the Add Rows function it makes reference to .val() being the correct thing search for the 'td' tag and then remove its content with .html() , try the following example and it will work for you: