-1

Preciso incluir um botão na minha tabela que irá remover um paciente(TR), o botão que eu inclui direto no HTML está removendo, porém o botão que é adicionado com o append não funciona.

    <header>
        <div class="container">
            <h1>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>
                        <th>Ações</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">5.00</td>   
                        <td class="info-gordura">10</td>
                        <td class="info-imc">0</td>
                        <td>
                            <button class="botao-remover">Remover</button>
                        </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>
                        <td><button class="botao-remover">Remover</button></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>
                        <td><button class="botao-remover">Remover</button></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>
                        <td><button class="botao-remover">Remover</button></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>
                        <td><button class="botao-remover">Remover</button></td>
                    </tr>
                </tbody>
            </table>
        </section>

        <section class="container">
            <h2 id="titulo-form">Adicionar novo paciente</h2>
            <ul id="mensagens-erro"></ul>
            <form id="form-adiciona">
                <div>
                    <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" type="text" placeholder="digite a porcentagem de gordura do seu paciente" class="campo campo-medio">
                </div>
        
                <button id="adicionar-paciente" class="botao bto-principal">Adicionar</button>
            </form>
        </section>

    </main>
    <script src="js/calcula-imc.js"></script>
    <script src="js/form.js"></script>
    <script src="js/remove-paciente.js"></script>
</body>

Javascript

var botaoAdicionar = document.querySelector("#adicionar-paciente");

botaoAdicionar.addEventListener("click", function(event){
    event.preventDefault();
    // Retorna o formulário do HTML através do ID (#form-adiciona)
    var form = document.querySelector("#form-adiciona");
    // Armazena as propriedades do form na variavel paciente
    var paciente = obtemPacienteDoFormulario(form);
    // Cria uma nova TR E TD
    var pacienteTr = criaTr(paciente);

    var erros = validaPaciente(paciente);
    
    if(erros.length > 0){
        exibirMensagensDeErro(erros);
        return;
    }
        var tabela = document.querySelector("#tabela-pacientes");

        tabela.appendChild(pacienteTr);

        form.reset();
    
});
// Obtem os dados informados no formulário ("ADICIONAR NOVO PACIENTE"), e retornar o objeto paciente com as suas propriedades
function obtemPacienteDoFormulario(form){
    var paciente = {
        nome: form.nome.value,
        peso: form.peso.value,
        altura: form.altura.value,
        gordura: form.gordura.value,
        imc: CalculaImc(form.peso.value,form.altura.value),
    }

    return paciente;
}

function criaTr(paciente){
    var pacienteTr = document.createElement("tr");
    pacienteTr.classList.add("paciente");

    var nomeTd = criaTd(paciente.nome, "info-nome");
    var pesoTd = criaTd(paciente.peso, "info-peso");
    var alturaTd = criaTd(paciente.nome, "info-altura");
    var gorduraTd = criaTd(paciente.nome, "info-gordura");
    var imcTd = criaTd(paciente.imc, "info-nome");
    var acaoTd = document.createElement("td");
    

    nomeTd.textContent = paciente.nome;
    pesoTd.textContent = paciente.peso;
    alturaTd.textContent = paciente.altura;
    gorduraTd.textContent = paciente.gordura;
    imcTd.textContent = paciente.imc;

    pacienteTr.appendChild(nomeTd);
    pacienteTr.appendChild(pesoTd);
    pacienteTr.appendChild(alturaTd);
    pacienteTr.appendChild(gorduraTd);
    pacienteTr.appendChild(imcTd);
    pacienteTr.appendChild(acaoTd);
    acaoTd.appendChild(criaTdAcao("botao-remover"))

    return pacienteTr;
}

function criaTdAcao(classe){
    var btn = document.createElement('button');
    btn.textContent = "Remover";
    btn.classList.add(classe);

    return btn;
}

function criaTd(dados,classe){ 
    var td = document.createElement("td");
    td.textContent = dados;
    td.classList.add(classe);

    return td;
}

var pacientes = document.querySelectorAll(".paciente");

pacientes.forEach(function(paciente){
    var btn = paciente.querySelector(".botao-remover");
    btn.addEventListener("click", function(){
        btn.closest("tr").remove();
    });
});
4
  • depois de fazer o append tem um elemento novo no DOM, precisa associar o evento click pra ele Commented 30/06/2021 às 22:53
  • Não entendi, o forEach não deveria passar por todos os botões com a mesma classe?
    – Renato
    Commented 30/06/2021 às 23:06
  • e passa pelo forEach depois que adicionou a nova linha? Commented 30/06/2021 às 23:19
  • Não use cumprimentos, nem agradecimentos, veja Exemplo Mínimo, Completo e Verificável
    – gleidson
    Commented 1/07/2021 às 0:53

1 Resposta 1

0

A razão pelo botão não estar funcionando, como mencionado nos comentários, é porque o botão adicionado não possui um event listener para capturar os eventos de click.

Uma solução seria adicionar o event listener para cada botão adicionado, mas também há outras formas de lidar com esse cenário.

Como você (talvez) deve saber, quando um evento é disparado no seu DOM, a menos que ele seja interrompido, ele irá "subir" até a raiz da sua arvore de elementos. Isso significa que se um evento de click teve seu botão como origem, ele irá subir e pode ser capturado em elementos antecessores a esse botão também.

Ao invés de colocar um event listener em cada botão, você poderia colocar um único event listener na sua tabela, e verificar se o evento teve como origem um botão com a classe botao-remover.

const tbody = documment.getElementById('tabela-pacientes');

tbody.addEventListener('click', function(event) {
    const target = event.target;
    if (target.classList.contains('botao-remover')) {
        target.closest('tr').remove();
    }
});

Dessa forma você automatiza o tratamento desse evento para os próximos botão adicionados, pois não há a necessidade de adicionar um event listener neles, uma vez que o elemento tabela é o responsável por responder a esses eventos.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .