0

Quando eu clico no botão remover eu removo toda minha linha com esse código, porém ao criar um usuário novo ele não fica sendo ouvido pelo .click()

inserePlacar = () => {
  let corpoTabela = $(".placar").find("tbody");
  let usuario = $("#input-nome").val();
  let numPalavras = $(".contador-palavras").text();
  let linha = novaLinha(usuario, numPalavras);
  corpoTabela.prepend(linha);
};



$(".botao-remover").click(function (event) {
  event.preventDefault();
  $(this).parent().parent().remove()
});

Já tentei colocar isso em uma function ficando assim:

inserePlacar = () => {
let corpoTabela = $(".placar").find("tbody");
let usuario = $("#input-nome").val();
let numPalavras = $(".contador-palavras").text();
let linha = novaLinha(usuario, numPalavras);
linha.find(".botao-remover").click(removeLinha)
corpoTabela.prepend(linha);
};



removeLinha = (event) =>{
  event.preventDefault();
  $(this).parent().parent().remove()
}

Mas aí não remove nada.

9
  • Thiago, troque essa parte do código por isto e veja se funciona: $(document).on("click", ".botao-remover", function (event) {
    – Meu ovo
    22/02/2019 às 12:54
  • Sam, ou eu não entendi e fiz errado ou não fucionou, ele se comportou igual o primeiro exemplo do meu codigo. 22/02/2019 às 13:07
  • Cara, deveria funcionar :D... Só as linhas que vc adiciona que não são removidas?
    – Meu ovo
    22/02/2019 às 13:29
  • Exatamente, somente as linhas que são adicionadas pelo JS que não são removidas. as que já estão no html conseguem ser removidas 22/02/2019 às 13:53
  • Deveria funcionar. Deve ser outra coisa.
    – Meu ovo
    22/02/2019 às 14:00

1 Resposta 1

2

O Bind de eventos e feito no Load da Pagina, quando vc adiciona elementos no DOM após o Load inicia, o Bind dos eventos ja foi feito e não pega os novos elementos adicionados. Porém o jQuery ja preve isso e te permite fazer Binds de eventos e elementos adicionados dinamicamente a pagina ja carregada. Para isso faça de seguinte forma:

o ID bloco_pai é o identificador do elemento no DOM que recebe os elementos dinamicos.

$("#bloco_pai").on("click",".botao-remover",function(){
    event.preventDefault();
    $(this).parent().parent().remove()
});

Desta forma vc esta informando ao jQuery que nesse bloco_pai, haverão elementos adicionados posteriormente, com a classe botao-remover e que deve ser feito o bind do evento click neles.

2
  • Certo mas quem seria o bloco pai? a TR? <tr> <td>Thiago</td> <td>10</td> <td> <a href="#" class="botao-remover"> <i class="small material-icons">delete</i> </a> 23/02/2019 às 0:48
  • O bloco pai pode ser qualquer bloco de nivel superior a sua linha de usuários, desde que seja um bloco que é renderizado no Load da pagina, não pode ser algo que é incluido dinamicamente. <div id='bloco_pai'> sua linha vai aqui </div> 25/02/2019 às 13:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .