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.