Removendo com o clique em um botão remover

Sim Marcelo, é esse mesmo o raciocínio! Lembrando que o parentNode sobe um nível a partir do target, que é o elemento clicado. Assim teremos:

event.target.parentNode.parentNode.remove();

Para a seguinte estrutura:

tr
- td
-- button

Então perfeito, vou implementar. Só fiquei meio em dúvida, se eu poderia realmente, aplicar um parentNode sobre outro parentNode, mas já que pode, é isto. Então por essa lógica, para chegar num elemento pai qualquer que seja, é só aplicar o parentNode até chegar nesse elemento. Certo? (Table, body, etc..)

Boa tarde, Marcelo! Como vai?

Só pra ir um pouco além da sua dúvida, a solução proposta por vc funciona, no entanto ela não é a solução ideal! Então vou lançar 2 desafios aqui pra vc!

Desafio 1: Pq essa solução de navegar pelo DOM usando parentNode não é a ideal?

Desafio 2: Que solução poderia ser usada para obter o mesmo resultado de forma otimizada?

Desafio lançado! Se não chegar a nenhuma conclusão, é só falar que eu apareço novamente para te levar para a luz!

Grande abraço e bons estudos!

Ok. Segue o que eu entendo.

1. Por mais que o ParentNode consiga navegar pelo DOM, imagino que não deva ser o uso correto dele para que ele foi criado, por na minha concepção sem ter implementado, deva ter algum tipo de problema com esse tipo de utilização, talvez simplesmente se perder após a alteração de um outro desenvolvedor e eu não souber que eu estou deletando. Imagine que esse outro desenvolvedor tenha adicionado um outro elemento pai para este botão por um outro motivo, mudando a nomenclatura e eu deletar outra coisa?!?! Loucura, mas fora o retrabalho, toda vez que mexer no HTML teria de mudar no JavaScript, sem dúvida não seria uma boa prática de programaçaõ.

2. Sinceramente eu não sei. Eu pensei que poderia criar a coluna e colocar talvez apenas escrito deletar, e quando o clique viesse apenas dessa td que está escrito excluir (identificaria por uma verificação, um if por exemplo) eu usaria apenas um parentNode na Td clicada, que seria a TR da linha correspondente, mas não sei se era bem isso o resultado de forma otimizada que esperava.

Mas é o que imagino.

Opa, Marcelo!

1. Exatamente! Usando parentNode o código JS fica acoplado com a estrutura do seu HTML! O que acaba por gerar problemas como o que vc citou!

2. Uma possível solução pra isso é utilizar os atributos data-* que surgiram no HTML 5. Ficaria algo assim:

<!-- HTML -->
<tr id="linha-1">
     <!-- restante do código omitido -->
     <td>
          <button class="remocao" data-ref="linha-1">Remover</button>
     </td>
</tr>

// JavaScript

// adição do callback removeCartao() a cada um dos botões omitodo.

function removeCartao() {
     var botaoRemove = this;
     var idDoCartao = botaoRemove.getAttribute("data-ref");
     var cartao = document.querySelector("#" + idDoCartao);
     cartao.remove();
}

Dessa forma o seu JavaScript fica totalmente desacoplado da estrutura do seu HTML!

Pegou a ideia? Qualquer coisa é só falar!

EXTRA: Para saber mais sobre atributos data-*

https://www.w3schools.com/tags/att_global_data.asp

https://developer.mozilla.org/pt-BR/docs/Web/API/HTMLElement/dataset

Grande abraço e bons estudos!