[Sugestão] Melhoria no código de remoção de pacientes!

Após realizar a aula de remoção de pacientes da tabela, percebi que o código desenvolvido pelo professor contém um "bug": ao clicar sobre as células do cabeçalho da tabela o cabeçalho também é removido.

Vejamos o código:

var tabela = document.querySelector('table');

tabela.addEventListener("dblclick", function(event){

    event.target.parentNode.classList.add("fadeOut");

    setTimeout(function(){
        event.target.parentNode.remove();
    }, 500);

});

Analisando... entendi que isso acontece pois o evento de duplo click ("dblclick") está sendo monitorado na tag "table" que também contém como filha o cabeçalho ("thead"), e por isso, quando o JS recebe o duplo click em uma célula (th) do cabeçalho ele também remove a "tr" contida na tag "thead".

Pensando em uma solução, resolvi o problema alterando o ponto de monitoramento do evento de duplo click da tag "table" para a tag "tbody" (corpo da tabela) apenas:

var tabela = document.querySelector('tbody');

Para isso, foi necessário apenas alterar o querySelector da variável tabela de "table" para "tbody".

Não sei se alguém também percebeu esse erro, mas espero ter ajudado!