jQuery elimina todas las filas de la tabla excepto la primera

280

Usando jQuery, ¿cómo elimino todas las filas de una tabla, excepto la primera? Este es mi primer intento de usar selectores de índice. Si entiendo los ejemplos correctamente, lo siguiente debería funcionar:

$(some table selector).remove("tr:gt(0)");

que leería como "Ajustar alguna tabla en un objeto jQuery, luego eliminar todos los elementos 'tr' (filas) donde el índice del elemento de tales filas es mayor que cero". En realidad, se ejecuta sin generar un error, pero no elimina ninguna fila de la tabla.

¿Qué me estoy perdiendo y cómo soluciono esto? Por supuesto, podría usar JavaScript directo, pero me estoy divirtiendo tanto con jQuery que me gustaría resolver esto usando jQuery.

Ken Paul
fuente
¿Alguien sabe por qué el código dado no funciona? También tengo problemas al poner el selector de filtro en la función de eliminación
Leto
1
Ahora que entiendo esto mejor, el código anterior no funciona porque $ (algún selector de tabla) selecciona solo el elemento de la tabla, no ninguno de sus elementos secundarios, por lo que no hay elementos 'tr' para que la función remove los encuentre. El uso de la función de búsqueda busca coincidencias entre los elementos secundarios del elemento de tabla.
Ken Paul
Mira esta respuesta stackoverflow.com/questions/4831334/…
AuthorProxy

Respuestas:

522

Esto debería funcionar:

$(document).ready(function() {
   $("someTableSelector").find("tr:gt(0)").remove();
});
Strelok
fuente
2
¿Qué sucede si quiero eliminar las filas de la tabla, excepto primero y segundo?
18
@ user594166 usa gt (1) en lugar de gt (0).
christianvuerings
66
Desde el sitio web de jQuery: Because :gt() is a jQuery extension and not part of the CSS specification, queries using :gt() cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. For better performance in modern browsers, use $("your-pure-css-selector").slice(index) instead. recomendaría usar $ ("# mytable> tr"). Slice (1) .remove ();
Chris_F
su código no funcionó para mí ... cambié gt (0) a gt (1) y esto funcionó.
Sábado
113

Creo que esto es más legible dada la intención:

$('someTableSelector').children( 'tr:not(:first)' ).remove();

El uso de niños también se ocupa del caso en el que la primera fila contiene una tabla al limitar la profundidad de la búsqueda.

Si tenía un elemento TBODY, puede hacer esto:

$("someTableSelector > tbody:last").children().remove();

Si tiene elementos THEAD o TFOOT, deberá hacer algo diferente.

tvanfosson
fuente
2
re: hacer algo diferente ... esto funciona:$('someTableSelector > tbody:last > tr:not(:first)').remove();
Cheeso
para eliminar a todos los niños tuve que usar comillas dobles. No lo reconocí de otra manera. $("#tasks").children().remove();
Doomsknight
40

Otra forma de lograr esto es usar la función empty () de jQuery con los elementos thead y tbody en su tabla.

Ejemplo de una mesa:

<table id="tableId">
<thead>
    <tr><th>Col1</th><th>Col2</th></tr>
</thead>
<tbody>
    <tr><td>some</td><td>content</td></tr>
    <tr><td>to be</td><td>removed</td></tr>
</tbody>
</table>

Y el comando jQuery:

$("#tableId > tbody").empty();

Esto eliminará todas las filas contenidas en el elemento tbody de su tabla y mantendrá el elemento thead donde debería estar su encabezado. Puede ser útil cuando desea actualizar solo el contenido de una tabla.

jpmorin
fuente
3
Esto probablemente tendrá el mejor rendimiento de todas las soluciones ofrecidas, y es muy elegante.
the.jxc
38

Si fuera yo, probablemente lo reduciría a un solo selector:

$('someTableSelector tr:not(:first)').remove();
Dave Ward
fuente
De acuerdo, pero más específico debe decir: $ ('someTableSelector tbody tr: not (: first)'). Remove ();
Marco Muciño
30

Su selector no necesita estar dentro de su eliminación.

Debería verse algo así como:

$("#tableID tr:gt(0)").remove();

Lo que significa seleccionar cada fila, excepto la primera en la tabla con ID de tableID y eliminarlas del DOM.

CMPalmer
fuente
Estoy de acuerdo. En mi caso, el objeto de la tabla había sido seleccionado previamente.
Ken Paul
Para eliminar todas las filas excepto la primera: - $ ("# tableID tr: gt (1)"). Remove ();
Biki
9
$('#table tr').slice(1).remove();

Recuerdo que encontrar ese 'corte' es más rápido que todos los otros enfoques, así que solo ponlo aquí.

Makubex
fuente
A algunos no me funcionó. La respuesta aceptada parece hacer el truco.
ankush981
gtestá en desuso, esta es la mejor respuesta.
CyberEd
7

Considere una tabla con id tbl: el código jQuery sería:

$('#tbl tr:not(:first)').remove();
Sanket Utekar
fuente
3

Para eliminar todas las filas, excepto la primera (excepto el encabezado), use el siguiente código:

$("#dataTable tr:gt(1)").remove();

Biki
fuente
1

La manera más fácil :

$("#mytable").find($("tr")).slice(1).remove()

-primera referencia a la tabla
-obtener la lista de elementos y cortarla y eliminar los elementos seleccionados de la lista

Pytholabs
fuente
0

-Lo siento, esta es una respuesta muy tardía.

La forma más fácil que he encontrado para eliminar cualquier fila (y todas las demás filas a través de la iteración) es esta

$ ('# rowid', '# tableid'). remove ();

El resto es fácil.

Farjad
fuente
0
$ ("# p-items"). find ('tr.row-items') .remove ();
Pramod
fuente
0

envuelto en una función:

function remove_rows(tablename) { 
    $(tablename).find("tr:gt(0)").remove();        
}

entonces llámalo:

remove_rows('#table1');
remove_rows('#table2');
PodTech.io
fuente
0

Esto funciona perfectamente

$("#myTable tbody").children( 'tr:not(:first)' ).html("");
Infolet.org
fuente
Sí, eso ya fue publicado varias veces antes. ¿Algo nuevo?
Nico Haase
0

Esto funcionó de la siguiente manera en mi caso y funcionó bien

$("#compositeTable").find("tr:gt(1)").remove();
saadk
fuente