Melhorando a usabilidade.

Olá. pude notar que com o código desenvolvido na aula ''delegando eventos'', é possível apagar o cabeçalho da tabela, o <tr> que está dentro da <thead> e contém as <th> do conteúdo do cabeçalho, pois quando o elemento pai "table" ouve o evento, não há especificidade se ele deve ser seletivo entre as <tr> do código, portanto torna possível apagar qualquer uma.

Pensei em duas soluções para essa melhora de usabilidade.

1- Reaproveitar o id já existente na tag <tbody> e utilizar o querySelector do arquivo remover-paciente.js para selecionar o <tbody>, pois quando o <tbody> ouvir a ação só será possível ele remover os seus filhos, que são as <tr> dentro do <tbody>. Com isso, o código do arquivo remover-paciente.js ficando dessa forma:

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

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

2- Outra forma que também pensei é um tanto mais verbosa, mas serve para qualquer outro elemento que não deseje remover em específico. Nesta maneira, você adicionara ao código index.html um id na tag <tr> pai das tags <th> (eu optei por trHead) e em seguida, no remover-paciente.js adicionara esse elemento a uma variável para poder utilizar um IF e conferir se o elemento clicado é diferente do elemento da tag <tr> que contempla as <th>. Com isso, o código do arquivo remover-paciente.js ficará desta maneira:

   var tabela = document.querySelector("table");
    var trHead = tabela.querySelector("#trHead");

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

            if (event.target.parentNode != trHead) {
                event.target.parentNode.remove();
        }
   });