Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Dúvida ao remover um paciente da lista

Pegando o primeiro exemplo do capitulo Remoção, Delegação e Animação onde o professor carrega os pacientes com o document.querySelectorAll o código abaixo está correto ou com boas praticas?

//Carregando todos os pacientes da tabela.
const listaPacientes = document.querySelectorAll('#tabela-pacientes');

//Percorrer todos os pacientes atuais e os criados com o forEach para remover.
listaPacientes.forEach(function(paciente){
    paciente.addEventListener('dblclick', function(event){
        event.target.parentNode.classList.add('fadeOut');
        setTimeout(function(){
            event.target.parentNode.remove();
        },500);
    });
});

Com o código eu percorri a tabela existente e caso tenha algum novo paciente ele conseguiu excluir da mesma forma e como o id="tabela-pacientes" está na tag tbody o cabeçalho da tabela não é removido ao clicar como estava no exemplo da aula.

3 respostas

Boa noite, Johnny! Como vai?

Veja que vc faz document.querySelectorAll('#tabela-pacientes');! Contudo, como o seletor utilizado é o de ID, apenas um único elemento deve ser retornado que é justamente o tbody que vc comentou!

Desse modo, quando vc faz listaPacientes.forEach() o que está fazendo é iterando apenas por um único elemento que é o tbody e adicionando nele o ouvite do evento dblclick.

Então, considerando apenas esse trecho do código que vc mandou, parece que as coisas não funcionariam corretamente!

Vc poderia colar aqui os seus códigos HTML e JS completos? Assim eu poderei dar uma olhada geral e te orientar melhor!

Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

Fala Gabriel boa noite! Entendi sua explicação, não sei como colocar os códigos todos aqui então segue o link do Github onde coloquei tudo que eu fiz do curso:

https://github.com/JohnnySaraiva/curso-javascript-alura

Quando eu coloquei o ID ele retorna algo do tipo NodeList. No caso usando ID, Classe ou até mesmo a tag tbody seria apenas para facilitar a chamada no document.querySelectorAll() Tentei fazer dessa forma pra testar como funcionou fiquei na dúvida hehe após dar uma olhada no código aceito dicas hehe. desculpa se falei ou fiz besteira mais ainda sou padawan hehehe agradeço a atenção vlw abraz.

solução!

Opa, Jhonny! Como vai? Realmente, o seu código vai funcionar sim! O que acontece é que eu acabei esquecendo de um pequeno detalhe: talvez meio sem querer ( ou querendo mesmo, não sei ) vc acabou implementando um padrão de projeto chamado delegate! O que acontece é que ao clicar duas vezes em qualquer linha do seu tbody, esse evento de duplo clique também consegue ser ouvido e capturado pelo pai das linhas que é justamente o tbody. O que é muito bom, afinal de contas, em vez de adicionar um ouvinte para cada linha da sua tabela, vc adicionou apenas um ouvinte para o seu tbody! Desse modo, ele funciona perfeitamente!

Mas, como melhoria do seu código, eu faria o seguinte:

// Obtendo o tbody da tabela.
const listaPacientes = document.querySelector('#tabela-pacientes');

// Adiciono o ouvinte de duplo clique no tbody.
listaPacientes.addEventListener('dblclick', function(event){
     event.target.parentNode.classList.add('fadeOut');
     setTimeout(function(){
          event.target.parentNode.remove();
     },500);
});

Perceba que dessa forma, eu utilizei o querySelector() em vez do querySelectorAll(), deixando claro que eu estou selecionando apenas o tbody e não todas as linhas como vc imaginava. O restante do código é praticamente igual ao seu, com a diferença que eu não fiz o forEach(), afinal de contas eu não tenho uma lista de elementos, e sim apenas um: o tbody!

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!