/ / Eliminar fila de tabla usando jQuery - jquery

Eliminar la fila de la tabla usando jQuery - jquery

El siguiente es mi código

Guión

$(document).ready(function(){
$("#click").click(function(){
$("#table").append("<tr><td>&nbsp;</td></tr>");
})
$("#remove").click(function(){
$("#table").remove("<tr><td>&nbsp;</td></tr>");
})
})

HTML

<table width="100%" border="1" cellspacing="0" cellpadding="0" id="table">
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>
<div id="click">click</div>
<div id="remove">remove</div>

Cuando agrego una fila, funciona muy bien, pero no sé cómo eliminar la última fila de la tabla. También puede verificar en línea manifestación.

¿Cómo puedo hacer esto?

Además, quiero que cuando el usuario también haga clic enCualquier fila se borrará. Lo he intentado, pero hay un problema. Si hace clic en la fila, se está eliminando a sí misma, pero cuando agrega una fila haciendo clic en #click, la fila no se elimina a sí misma haciendo clic en ella.

Aquí está mi código:

Guión

$(document).ready(function(){
$("#click").click(function(){
$("#table").append("<tr><td>&nbsp;</td></tr>");
})
$("#remove").click(function(){
$("#table tr:last").remove();
})
$("#table tr").click(function(){
$(this).remove();
});
})

Respuestas

22 para la respuesta № 1

Si desea eliminar la última fila de la tabla #table, necesitas apuntarlo con tu selector, y luego llamar $.remove() En contra:

$("#remove").on("click", function(){
$("#table tr:last").remove();
})

5 para la respuesta № 2

No se puede eliminar de la misma manera que tiene que especificar qué nodo desea eliminar $("#table tr:first") y la eliminamos remove()

$("#remove").click(function(){
$("#table tr:first").remove();
})

http://jsfiddle.net/2mZnR/1/


1 para la respuesta № 3

Una demo esta en http://jsfiddle.net/BfKSa/ o En caso de que esté enlazando, agregue y elimine a cada fila, este demo diferente http://jsfiddle.net/xuM4N/ son útiles

API: remove => http://api.jquery.com/remove/

Como mencionó: Esto eliminará la "eliminación de la última fila de la tabla"

$("#table tr:last").remove(); Hará el truco para tu caso.

Código

$(document).ready(function(){
$("#click").click(function(){
$("#table").append("<tr><td>foo add&nbsp;</td></tr>");
})
$("#remove").click(function(){
$("#table tr:last").remove();
})
})

0 para la respuesta № 4

Encuentra la última fila con un selector y borra esa fila así:

$("#table > tr:last").remove();

Esto eliminará la última fila de la tabla. ¿Qué pasa si quieres borrar el primero?

$("#table > tr:first").remove();

Eso es. Hay un curso en línea de codeschool para jQuery. Encontrarás muchas cosas valiosas allí, incluyendo selectores y manipulación de DOM. Aquí hay un enlace: http://jqueryair.com/


0 para la respuesta № 5

Puedes quitar el último tr de la tabla usando la clase de tabla al hacer clic en el botón.

$("#remove").on("click", function(){
$(".tbl tr:last").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tbl" width="100%" border="1" cellspacing="0" cellpadding="0" >
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>
<button id="remove">remove</button>


0 para la respuesta № 6

Si desea eliminar la propia fila al hacer clic en la fila de la tabla,

$("table tr").on("click", function(){
$(this).remove();
});

Si desea agregar una fila al hacer clic en el botón de clic al final de la tabla

 $("#click").click(function(){
$("#table").append("<tr><td>Xyz</td></tr>");
})