Error while performing data deletion

Question

Error while performing data deletion

Asked 5 years, 10 months ago

Viewed 48 times

0

When I click the remove button I remove all my line with this code, but when creating a new user it is not being heard by .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()
});

I’ve tried to put this in a function being like this:

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()
}

But then it doesn’t remove anything.

Thiago, swap this part of the code for this and see if it works: $(document).on("click", ".botao-remover", function (event) {

– Sam

2019/02/22 at 12:54
Sam, either I didn’t understand and did wrong or didn’t mess, he behaved like the first example of my code.

– Thiago Maha

2019/02/22 at 13:07
Dude, it should work :D... only the lines you add that aren’t removed?

– Sam

2019/02/22 at 13:29
Exactly, only lines that are added by JS that are not removed. lines that are already in html can be removed

– Thiago Maha

2019/02/22 at 13:53
It should work. It must be something else.

– Sam

2019/02/22 at 14:00
Put in question this function novaLinha, I think it will help to analyze better.

– Sam

2019/02/22 at 14:05
can reproduce the problem in https://jsfiddle.net/ or here? so I can test and find a solution for your problem.

– HudsonPH

2019/02/22 at 14:10
Before formulating an answer I would like to know of there are other components that use the id = ".botao-remover" and if there are other objects with this id if the event click of these objects is and will always be the code of the removeLinha ? I ask because the solution that I imagined with this data can generate the side effect of modifying undesirably an event click.

– Augusto Vasques

2019/02/22 at 15:09
https://jsfiddle.net/ThiagoMaha/cknx6mh1/4/ I think this is how you do it... I’m new to the studies and I’m not really familiar with the tools

– Thiago Maha

2019/02/24 at 12:30

Show 4 more comments

1 answer

Browser other questions tagged javascript jquery javascript-events

You are not signed in. Login or sign up in order to post.

by Gabriel Selga Vital • **175** points · Answer 1 · 2019-02-22T16:33:33+00:00

The Event Bind is done in the Page Load, when you add elements in the DOM after Load starts, the Event Bind has already been done and does not take the new elements added. But jQuery already predicts this and allows you to bind events and elements dynamically added to the already loaded page. For this do it this way:

the block ID is the identifier of the element in the DOM that receives the dynamic elements.

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

This way you are informing jQuery that in this parent block, there will be elements added later, with the boot-remove class and that the bind of the event should be done click on them.