Olá amigos,
No Curso: JavaScript: Programando na linguagem da web. Na Aula 7, no Exercicio 7: Mãos na massa: removendo os pacientes, após o passo 4, em Dica:
Aqui menciona "Não sei se você notou, mas se der um duplo clique no cabeçalho da nossa tabela, esta linha também será removida."
No meu teste, com o código baixado na Aula 7, não esta ocorrendo isto, um duplo clique não esta apagando o cabeçalho. E me parece correto! Vide o código javascript abaixo no arquivo remove-paciente.js, conforme exemplo, e lá no final o arquivo HTML.
var tabela = document.querySelector("#tabela-pacientes");
tabela.addEventListener("dblclick", function(event) {
event.target.parentNode.remove();
});Neste caso a variável tabela esta pegando o id "tabela-pacientes", ou o elemento "tbody" e este elemento não é pai do elemento "thead", eles estão no mesmo nível, portanto o evento de duplo clique no cabeçalho não é capturado.
Eu consegui realizar o efeito desejado do exercicio, porém utilizando o elemento "table", adicionando o id=tabela-inteira no html. Debaixo deste elemento esta o "thead" e o elemento "tbody".
<table id="tabela-inteira">Por fim o arquivo javascript ficou assim:
var tabela = document.querySelector("#tabela-inteira");
//console.log(tabela);
tabela.addEventListener("dblclick", function(event) {
event.target.parentNode.remove();
});Agora sim, ao dar um duplo clique no cabeçalho o mesmo é removido, e é possível avançar no exercicio, aplicando o código e realizando o exercicio proposto.
Página HTML original
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Aparecida Nutrição</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<header>
<div class="container">
<h2 class="titulo">Aparecida Nutrição</h2>
</div>
</header>
<main>
<section class="container">
<h2>Meus pacientes</h2>
<table>
<thead>
<tr>
<th>Nome</th>
<th>Peso(kg)</th>
<th>Altura(m)</th>
<th>Gordura Corporal(%)</th>
<th>IMC</th>
</tr>
</thead>
<tbody id="tabela-pacientes">
<tr class="paciente" id="primeiro-paciente">
<td class="info-nome">Paulo</td>
<td class="info-peso">100</td>
<td class="info-altura">2.00</td>
<td class="info-gordura">10</td>
<td class="info-imc">0</td>
</tr>
...
<script src="js/calcula-imc.js" ></script>
<script src="js/form.js" ></script>
<script src="js/remove-paciente.js" ></script>
</body>
</html>
