Entrar Ainda não tem acesso?
1
resposta

Filtrar tabela removendo do DOM

Referente ao curso JavaScript: programando na linguagem da web, no capítulo Filtrando uma tabela e atividade Implementando a lógica de filtragem

por Jose Honorato da Silva Neto
| 102.2k xp | 2 posts
Analista Pleno DevOps

O filtro apresentado no curso apenas esconde as TRs, mas o conteúdo ainda continua no DOM.

Algo parecido com isso:

<tbody id="tabela-pacientes">
    <tr class="paciente"></tr>
    <tr class="paciente filtrado"></tr>
    <tr class="paciente"></tr>
    <tr class="paciente filtrado"></tr>
    <tr class="paciente"></tr>
    <tr class="paciente"></tr>
    <tr class="paciente"></tr>                        
</tbody>

Como fazer este mesmo filtro REMOVENDO as TRs do DOM que não se encaixam no filtro, e depois fazendo elas aparecerem novamente ao apagar o texto do input?

Algo na parecido de single-page application... coisas que seriam simples por exemplo com o AngularJS, gostaria de saber como fazer com JS puro.

1 resposta
por Leandro Souza
| 458.9k xp | 201 posts
Desenvolvedor Web

Bom, não entendo de Angular, mas excluir, criar, excluir, criar... manipular o DOM o tempo todo dessa forma é péssimo.

Toda vez que uma destas alterações é feita todo o DOM (árvores de elementos html) é recriado do ZERO, isso custa muito caro, afeta diretamente o desempenho/performance.

Mas... diante da busca, do que adicionar classe para ocultar, bastaria remover, ex: item.remove(). Para adicionar, teria que criar novamente a tag com document.createElement, adicionar a tr na tabela com appendChild, inserir o conteúdo com textContent, que teria de ser feita uma cópia antes de excluir a tr, senão adeus conteúdo, enfim... ocultar é melhor saída!