Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Não remove linha da tabela - aula 06 Criando botão remover

Boa noite, Douglas Quintanilha! Antes de tudo quero parabenizar-lhe pelo curso, muito bom!

Quando clico no ícone não está removendo, não consigo encontrar o problema. Tenho uma dúvida: como isso pode acontecer se ainda não existe a class botao-remover

$(".botao-remover").click

mas o seu exemplo remove a linha da tabela.

Veja o meu código abaixo:

function inserePlacar(){
    //a class palcar está dentro de uma section. Dentro da section tem uma
    //table. A function find do jquery busca o elemento dentro da section
    var corpoTabela = $(".placar").find("tbody");
    var usuario = "Nostik";
    var numPalavras = $("#contador-palavras").text();
    var botaoRemover = "<a href='#'><i class='small material-icons'>delete</i></a>" ;

    var linha = "<tr>"+
                    "<td>"+ usuario + "</td>"+
                    "<td>"+ numPalavras + "</td>"+
                    "<td>"+ botaoRemover + "</td>"+
                "</tr>";

    //prepend - insere como a primeira palavra da tabela
    //append - insere como a última palavra da tabela
    corpoTabela.prepend(linha);
}

$(".botao-remover").click(function(event){
    //this é quem sofreu o evento, ou seja, é o próprio elemento
    //preventDefault - para o que acontece por padrão provocado pelo evento
    event.preventDefault();

    //this ele não tem acesso as funçoes do jquery
    //para o this receber os poderes do jquery ele precisa ser envolvido pelo jquery
    //para remover a linha inteira é preciso navegar através do parent (pai)
    //ex: o primeiro parent remove o elemento td e o segundo remove o elemento tr
    //$(this).parent.parent - vai subindo na árvore do html
    $(this).parent().parent().remove();
});

Desde já agradeço.

1 resposta
solução!

Ivanostik Lopes, tudo bom?

Nesse caso, a linha que está sendo adicionada dinamicamente, tem o botão remover criado nessa variavel:

var botaoRemover = "<a href='#'><i class='small material-icons'>delete</i></a>" ;
`

Aqui ele ainda não possui uma class botao-remover, talvez por isso o código não esteja funcionando como o esperado, adicione essa classe na tag a do botão na hora de criá-lo.

Caso o problema ainda persista, pode me mandar uma url do GitHub com o código do seu projeto para resolvermos isso juntos? :)

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software