Publicado em

Como Remover Linhas de uma Tabela com jQuery

Neste tutorial você vai aprender uma forma prática de remover linhas de uma tabela com jQuery.

Como requisito, os itens da lista (a tabela) são adicionados dinamicamente, pelo usuário, então não podemos definir id’s para as linhas da tabela para poder removê-las. Além disso, as funções de front-end devem ficar em um arquivo javascript separado.

Ao final, você vai ter uma tabela como essa:


Marcação HTML da Tabela

Para começar, vamos criar a marcação da tabela, em uma página HTML.

Faça o download do jQuery para uma pasta js no seu projeto, e coloque uma referência para ele na sua página:

<script type="text/javascript" src="js/jquery.js"></script>

E na sua página (index.htm), coloque esta marcação de tabela:

O ponto principal desta marcação é adicionar esta linha ao evento onclick dos botões de remover:

onclick="remove(this)"

Veja que deve ser passado como parâmetro o próprio button (o parâmetro this) para que o jQuery saiba qual objeto estará selecionado, já que nesta tela não vai ser possível usar seletores porque as linhas serão criadas dinamicamente.

O próximo passo, agora, é implementar a função remove() em javascript…


Criando a Função com Javascript + jQuery

Crie, agora, um arquivo javascript chamado functions.js. Eu costumo deixá-lo em na pasta js onde está o jQuery.

Adicione este código ao arquivo functions.js:

Esta função procura a linha da tabela (row) que esteja mais próxima do botão que disparou o evento.

Com essa linha obtida, na variavel tr é possível utilizar o jQuery para fazer um efeito de desvanecimento na linha (utilizando a função fadeOut) e remover a marcação da linha na página, ou seja remover a <tr>, usando a função remove do jQuery.

Para fechar, o return false evita que a página seja recarregada pelo evento de clique do botão.

Não esqueça de inserir a referência a este arquivo na página HTML:

<script type="text/javascript" src="js/functions.js"></script>

Sobre as Funções jQuery em Arquivos Separados

Um aspecto interessante desse código é que ele chama funções do jQuery em um arquivo Javascript separado.

Porém, este novo arquivo não enxerga as funções do jQuery automaticamente. O jQuery fica fora do escopo, e nenhuma das suas funções irão funcionar. Apenas as que são Javascript puro.

Para que o arquivo js externo tenha acesso às funções do jQuery, você deve criar uma função com a sintaxe do jQuery, e utilizá-la para tratar seus eventos. Observe que apenas a declaração da função é diferente:


Próximos Passos…

A remoção esta pronta. Seria interessante criar, depois, uma função para adicionar as linhas à tabela. Mas, fica para um outro tutorial.

Você pode ver a demo deste tutorial no link abaixo. Este demo utiliza o Bootstrap para ficar mais apresentável.

Demo no CodePen

11 comentários sobre “Como Remover Linhas de uma Tabela com jQuery

  1. Parabéns Ruan, muito bom esse artigo. Resolveu meu problema. Muito Obrigado.

    1. Muito obrigado, Elton!

      Fico feliz que o tutorial foi útil pra vc.

      Abs!

  2. Parabéns Ruan, ótimo post.
    Só me tire uma dúvida:
    A remoção da linha na tabela funciona muito bem, entretanto se eu enviar os dados da tabela para outro lugar (banco de dados por exemplo), eu percebo que a linha realmente não foi excluída do array, ele simplesmente sumiu da tabela eliminando a tr, mas no array ele continua.
    Você pode me ajudar como remover esse registro também do array, pensei em usar o :eq(), mas não quero dizer o índice do array, quero q elimine o índice da linha correspondente que o botão ‘remove’ está.

    Desde já agradeço, vlw cara.

    1. Valeu, Rodrigo!

      Essa remoção é só de front-end mesmo.

      Quando enviar os dados, você vai precisar ter alguma função no backend para verificar quem foi removido.

      Uma sugestão seria percorrer o array anterior e comparar com o novo. E, então, fazer o delete nos que “sobraram”.

      O ideal é ter o ID de cada registro nas linhas da tabela. Assim você pode fazer essa sincronização pelo ID.

      Bom vai depender da linguagem que tu estás usando, também.

      1. Boa tarde Ruan,

        Parabéns pelo trabalho!
        Eu estou com a mesma dificuldade informada pelo Rodrigo.
        Você teria algum exemplo para que eu possa ter um norte e resolver.

        Abração!

        1. otima publicação

  3. Como faço para pegar o id que está na tr ?

  4. Parabens, funciona!

    abs

  5. Estou tentando fazer uma pesquisa, basicamente ver se uma string contem em outra com JavaScript, se essa consulta dar certo ok, caso contrário capturar o index da linha e deleta-la, isso roda dentro de um for, mas infelizmente ele apaga sempre a linha que encontra o texto e para de rodar o for.
    Segue a função abaixo:

    function pesquisaProduto() {
    alert(‘entrou’);
    var texto = document.getElementById(‘buscaTabelaProdutos’).value;
    var tabela = document.getElementById(‘tableProdutos’);
    var tds = tabela.getElementsByClassName(‘tdDesc’);
    alert(tds.length);
    for (i = 0; i < tds.length; i++) {
    var valor = tds[i].firstChild.nodeValue;
    if(valor.indexOf(texto)==-1){
    //texto encontrado nao deletar linha
    alert('nao achou');
    tabela.deleteRow(i);
    }else{
    alert('achou');
    }
    }
    }

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *