4
respostas

Exclusão do Cabeçalho da tabela

Apos realizar a implementação da remoção da tr da tabela com sucesso, o mesmo nao ocorreu ao clicar sobre o título.

index.html

<!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">
            <h1 class="tituloPrincipal">Aparecida Nutrição</h1>
        </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>

                    <tr class="paciente">
                        <td class="info-nome">João</td>
                        <td class="info-peso">80</td>
                        <td class="info-altura">1.72</td>
                        <td class="info-gordura">40</td>
                        <td class="info-imc">0</td>
                    </tr>

                    <tr class="paciente">
                        <td class="info-nome">Erica</td>
                        <td class="info-peso">54</td>
                        <td class="info-altura">1.64</td>
                        <td class="info-gordura">14</td>
                        <td class="info-imc">0</td>
                    </tr>

                    <tr class="paciente">
                        <td class="info-nome">Douglas</td>
                        <td class="info-peso">85</td>
                        <td class="info-altura">1.73</td>
                        <td class="info-gordura">24</td>
                        <td class="info-imc">0</td>
                    </tr>
                    <tr class="paciente">
                        <td class="info-nome">Tatiana</td>
                        <td class="info-peso">46</td>
                        <td class="info-altura">1.55</td>
                        <td class="info-gordura">19</td>
                        <td class="info-imc">0</td>
                    </tr>
                </tbody>
            </table>

        </section>
    </main>
    <section class="container">
        <h2 id="titulo-form">Adicionar novo paciente</h2>
        <ul id="mensagens-erro"></ul>    
        <form id="form-adiciona">
            <div class="">
                <label for="nome">Nome:</label>
                <input id="nome" name="nome" type="text" placeholder="digite o nome do seu paciente" class="campo">
            </div>
            <div class="grupo">
                <label for="peso">Peso:</label>
                <input id="peso" name="peso" type="text" placeholder="digite o peso do seu paciente" class="campo campo-medio">
            </div>
            <div class="grupo">
                <label for="altura">Altura:</label>
                <input id="altura" name="altura" type="text" placeholder="digite a altura do seu paciente" class="campo campo-medio">
            </div>
            <div class="grupo">
                <label for="gordura">% de Gordura:</label>
                <input id="gordura" name="gordura" type="text" placeholder="digite a porcentagem de gordura do seu paciente" class="campo campo-medio">
            </div>

            <button id="adicionar-paciente" class="botao bto-principal" type="button">Adicionar</button>
        </form>
    </section>

    <!-- Importação dos JavaScripts -->
    <script src="js/calculaIMC.js"></script>
    <script src="js/form.js"></script>
    <script src="js/remove.js"></script>
</body>

</html>

remove.js

var tabela =  document.querySelector("#tabela-pacientes");
tabela.addEventListener("dblclick", function(event){
    event.target.parentNode.remove();
});
4 respostas

opa, acho que não entendi.. qual o título que vc ta falando?

Ele deve estar falando do Cabeçalho da tabela.

Não vai ocorrer a remoção mesmo, isso porque ao executar:

document.querySelector("#tabela-pacientes");

Você está capturando somente os elementos do corpo da tabela, conforme está definido no HTML:

<tbody id="tabela-pacientes">

Ocorreria se o ID estivesse em:

<table id="tabela-pacientes">

Estou certo instrutor?

Exatamente, o problema é que o código mostrado durante a aula está diferente do código usado no "mão na massa". Se repararem bem, no "mão na massa" não se usa o ID como seletor, sim a própria tag TABLE. Gerando assim a dúvida, já que desta forma o TR dentro do THEAD seria sim excluído.

A explicação do Bruno está correta. O que está incorreto é o texto do "mão na massa", por isso a confusão de alguns alunos.

No texto do "mão na massa" temos o seguinte pedaço de código logo acima da sessão "Dicas":

// remove-paciente.js var tabela = document.querySelector("#tabela-pacientes"); tabela.addEventListener("dblclick", function(event) { event.target.parentNode.remove(); });

Acontece que ao usar o ID "#tabela-pacientes" estamos selecionado o contéudo de "tbody", que já exclui o header. Assim, o cabeçalho da tabela não será deletado se for clicado.

Logo, o primeiro parágrafo da sessão "Dicas" que diz "Não sei se você notou, mas se der um duplo clique no cabeçalho da nossa tabela, esta linha também será removida" não será verdadeiro se o aluno implementar o código exatamente como está no texto.

Seguindo o texto, no próximo pedaço de código temos:

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

Esse código está condizente com a explicação sobre a remoção do cabeçalho e o uso da dica de testar o nome da tag para ver se é TD.

Talvez fosse interessante a Alura corrigir o texto. ;-)