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

Alternativa ao problema de exclusão do cabeçalho

Olá pessoal, eu achei legal a correção usando o atributo tagName, mas logo de cara eu já pensei em outra solução. Em vez de pegar a tabela inteira com o querySelector, podemos pegar o tbody, afinal, queremos excluir apenas os pacientes (conteúdo da tabela, que semanticamente estará no tbody, né?).

// remove-paciente.js
var corpoTabela = document.querySelector("tbody");

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

    var alvoClicado = event.target; // pegamos o alvo com o atributo target
    var paiAlvo = alvoClicado.parentNode; // pegamos o elemento pai do alvo com o atributo parentNode

    paiAlvo.remove();

});

Dessa forma não é necessário fazer uma condição (if) verificando o atributo tagName do alvo clicado, melhorando também a performance, pois teremos uma verificação a menos (eu sei que é apenas um if, mas num projeto grande pode fazer a diferença ter menos condições, né?)

obs: eu sei que eu podia ter deixado apenas event.target.parentNode.remove(); dentro da função anonima. Declarei as variáveis apenas por uma questão de deixar um pouco mais claro se algum dia eu quiser rever o código.

O que vocês acham da solução? É viável ou tem algum ponto negativo?

Obrigado.

2 respostas
solução!

Oi Vinícius,

Se não houver outros elementos dentro do <tbody>além dos que vc quer remover, essa solução funciona, sim.

Mas pensando num HTML assim, onde as tags <tr> são os elementos que queremos remover, já poderia dar errado:

<tbody>
    <tr>
        <td>
            <span>Titulo</span>
            <span>Subtítulo</span>
        </td>
        <td>
            Info
        </td>
    </tr>
</tbody>

Se o usuário clicar exatamente no texto do título ou do subtítulo, o event.target será uma das tags <span> e o parentNode, que será removido, será o <td> e não a <tr>.

Boa !!!