1
resposta

parentNode

Caros, boa noite. Na aula 03 - Delegando eventos do modulo 07 da trilha "JS programando na lig da web" aprendemos sobre o remove() e o parentNode. Na solução apresentada para a remoção de um paciente clicando em apenas um elemento <td> foi definido no remover-paciente.js como o pai de todos os elementos a Tabela:

var tabela = document.querySelector("#tabela-pacientes");

tabela.addEventListener("dblclick", function(event){
    event.target.parentNode.remove();
    });

No html vemos que a Tabela possui os filhos <thead>, <tr> e <th>. Então por que quando clicamos nos elementos da cabeçalho os <th> Nome, Peso, Altura etc, o cabeçalho não é removido? Não que ele deva ser, mas apenas não consigo ver como que eles estão protegidos de serem removidos com a solução adotada. Obrigado

1 resposta

Olá, Sergio, tudo bem?

No vídeo, o instrutor seleciona a tabela com o seletor table no querySelector, e realmente acontece o comportamento que você falou (se clicarmos no cabeçalho, ele é removido).

Então ele mesmo corrige o código para esse que você postou, trocando o seletor do querySelector para #tabela-pacientes. Esse id está localizado no tbody da tabela, em vez de ser na tabela em si. Assim, o evento de remoção não acontecerá no cabeçalho, assim corrigindo o problema.

Você pode ver essa correção nessa atividade, descendo a página até o tópico "Dica".

Bons estudos! :)