1
resposta

Sugestão para melhoria da solução proposta devido a falha encontrada.

Olá, tudo bem?

Realizando alguns testes para validar o código proposto, encontrei uma falha, pois como o target é a tabela, existem partes do layout onde ainda conseguimos clicar na tabela sem focar os elementos filhos, como nas bordas da tabela, deste modo ao clicarmos, o elemento a ser removido é o pai da tabela, no caso a "section" inteira que contém os filhos:

<h2>Meus pacientes</h2>

e

<table>...</table>

Um possível solução seria verificar se o elemento pai se enquadra em alguma regra de validação, como por exemplo, a classe dele se inicia com a palavra "paciente":

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

tabela.addEventListener("dblclick", function(event){
  var alvoEvento = event.target;
  var paiAlvo = alvoEvento.parentNode;

  if (paiAlvo.className.startsWith("paciente")){
    paiAlvo.remove();
  } else{
    console.log('Alvo Incorreto');
  }
});

Acredito a solução proposta responda o questionamento do Sergio no tópico "A solução sugerida remove também a linha de título da tabela".

Existe alguma outra solução mais eficaz utilizando boas práticas para contornar este tipo de problema?

1 resposta

Fala ai Marcos, tudo bem? Muito bom, acho a solução boa, mandou bem.

Abraços e bons estudos.