O jQuery exclui todas as linhas da tabela, exceto a primeira

280

Usando jQuery, como excluo todas as linhas de uma tabela, exceto a primeira? Esta é minha primeira tentativa de usar seletores de índice. Se eu entendo os exemplos corretamente, o seguinte deve funcionar:

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

que eu leria como "Embrulhe alguma tabela em um objeto jQuery e remova todos os elementos 'tr' (linhas) onde o índice de elementos dessas linhas é maior que zero". Na realidade, ele é executado sem gerar um erro, mas não remove nenhuma linha da tabela.

O que estou perdendo e como faço para corrigir isso? Claro, eu poderia usar javascript direto, mas estou me divertindo tanto com o jQuery que gostaria de resolver isso usando o jQuery.

Ken Paul
fonte
Alguém sabe por que o código fornecido não está funcionando? Eu também tenho problema quando colocar seletor de filtro em função remove
Leto
1
Agora que entendi isso melhor, o código acima não funciona porque $ (algum seletor de tabela) seleciona apenas o elemento da tabela, nenhum de seus filhos, portanto, não há elementos 'tr' para a função de remoção encontrar. O uso da função find procura correspondências entre os filhos do elemento table.
Ken Paul
Veja esta resposta stackoverflow.com/questions/4831334/…
AuthorProxy

Respostas:

522

Isso deve funcionar:

$(document).ready(function() {
   $("someTableSelector").find("tr:gt(0)").remove();
});
Strelok
fonte
2
E se eu quiser remover as linhas da tabela, exceto a primeira e a segunda?
18
@ user594166 use gt (1) em vez de gt (0).
21411 Christian
6
No site do 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. eu recomendaria usar $ ("# mytable> tr"). Slice (1) .remove ();
31316 Chris_F
seu código não funcionou para mim .. eu mudei gt (0) para gt (1) e isso funcionou.
Saadk 16/05/19
113

Eu acho que isso é mais legível, dada a intenção:

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

O uso de filhos também cuida do caso em que a primeira linha contém uma tabela, limitando a profundidade da pesquisa.

Se você tinha um elemento TBODY, pode fazer o seguinte:

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

Se você tiver elementos THEAD ou TFOOT, precisará fazer algo diferente.

tvanfosson
fonte
2
re: fazer algo diferente .... isso funciona:$('someTableSelector > tbody:last > tr:not(:first)').remove();
Cheeso
para remover todos os filhos, tive que usar aspas duplas. Não o reconheceu de outra maneira. $("#tasks").children().remove();
Doomsknight 9/11
40

Outra maneira de conseguir isso é usar a função empty () do jQuery com os elementos thead e tbody na sua tabela.

Exemplo de uma tabela:

<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>

E o comando jQuery:

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

Isso removerá todas as linhas contidas no elemento tbody da sua tabela e manterá o elemento thead onde seu cabeçalho deve estar. Pode ser útil quando você deseja atualizar apenas o conteúdo de uma tabela.

jpmorin
fonte
3
Provavelmente, terá o melhor desempenho de todas as soluções oferecidas e é muito elegante.
the.jxc
38

Se fosse eu, provavelmente resumiria a um único seletor:

$('someTableSelector tr:not(:first)').remove();
Dave Ward
fonte
Concordo, mas mais especicamente, deve-se dizer: $ ('someTableSelector tbody tr: not (: first)'). Remove ();
Marco Muciño 21/01
30

Seu seletor não precisa estar dentro da sua remoção.

Deve ser algo como:

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

O que significa selecionar todas as linhas, exceto a primeira da tabela com o ID da tabela, e removê-las do DOM.

CMPalmer
fonte
Concordo. No meu caso, o objeto de tabela havia sido selecionado anteriormente.
Ken Paul
Para remover todas as linhas, exceto a primeira: - $ ("# tableID tr: gt (1)"). Remove ();
Biki
9
$('#table tr').slice(1).remove();

Lembro-me de que encontrar essa 'fatia' é mais rápido do que todas as outras abordagens, então basta colocá-la aqui.

Makubex
fonte
Alguns não funcionaram para mim. A resposta aceita parece fazer o truque.
ankush981
gtestá obsoleto, esta é a melhor resposta.
CyberEd
7

Considere uma tabela com o ID tbl: o código jQuery seria:

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

Para remover todas as linhas, exceto a primeira (exceto o cabeçalho), use o código abaixo:

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

Biki
fonte
1

Caminho mais fácil :

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

-primeira referência à tabela
-get a lista de elementos e dividi-la e remover os elementos selecionados da lista

Pytholabs
fonte
0

-Desculpe, isso é resposta muito tarde.

A maneira mais fácil que encontrei de excluir qualquer linha (e todas as outras linhas através da iteração) é esta

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

O resto é fácil.

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

envolto em uma função:

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

então chame-o:

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

Isso funciona perfeitamente

$("#myTable tbody").children( 'tr:not(:first)' ).html("");
Infolet.org
fonte
Sim, isso já foi publicado várias vezes antes. Alguma coisa nova?
Nico Haase
0

Isso funcionou da seguinte maneira no meu caso e funcionando bem

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