Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

querySelector e querySelectorAll

Olá pessoal, preciso de uma ajuda com querySelectorAll que não funciona.

Vejam só essa minha tabela abaixo que criei pra testar o que estou aprendendo:

        <table class="table table-hover table-bordered" id="tabela-funcionarios-geral">
            <thead>
            <tr>
                <th>Nome</th>
                <th>Matrícula</th>
                <th>Cargo</th>
                <th>Data de Contratação</th>
                <th>Observação</th>
                <th>Exclusão</th>
            </tr>
            </thead>
            <tbody id="tabela-funcionarios">
            <tr class="funcionario" id="funcionario">
                <td class="nome">Isaque</td>
                <td class="mat">001</td>
                <td class="cargo">Gerente de Ti</td>
                <td class="data_contratacao">2015-01-30</td>
                <td class="observacao">Sem observacão</td>
                <td class="excluir">Exclusão</td>
            </tr>
            <tr class="funcionario" id="funcionario">
                <td class="nome">Elenilton</td>
                <td class="mat">002</td>
                <td class="cargo">Analista de Suporte</td>
                <td class="data_contratacao">2012-01-30</td>
                <td class="observacao">Sem observacão</td>
                <td class="excluir">Exclusão</td>
            </tr>
            <tr class="funcionario" id="funcionario">
                <td class="nome">Silvio</td>
                <td class="mat">003</td>
                <td class="cargo">Analista de Sistemas</td>
                <td class="data_contratacao">2014-12-01</td>
                <td class="observacao">Sem observacão</td>
                <td class="excluir">Exclusão</td>
        </tr>
</tbody>
        </table>

O que eu quero é que quando o usuário clique no ultimo td de cada linha, a linha toda seja excluída.

E este é meu código JS:

  var excluirLinha = document.querySelectorAll(".excluir");

  excluirLinha.addEventListener("click", function(event){

    var alvoEvento = event.target;
    var paiDoAlvo = alvoEvento.parentNode;

    paiDoAlvo.remove();

Isso está funcionando normalmente pra primeira linha quando eu uso o querySelector, mas se eu usar o querySelectorAll recebo o erro informando que o escutador de eventos não é uma função: " Uncaught TypeError: excluirLinha.addEventListener is not a function"

Sei que isso deve ser porque o querySelector retorna um Nodelist, mas se funcionou só com a primeira, porque não funcionou com todas usando o querySelectorAll?

Tudo que eu preciso é que cada linha da tabela seja excluida quando clicar no ultimo td respectivamente. Quando clicar nos outros td's da mesma linha, não deve excluir.

Não sei se consegui ser claro.

Qualquer ajuda agradeço.

2 respostas
solução!

Conseguiu ser claro sim, você esta bem perto da solução.

Como voce mesmo disse o querySelectorAll retorna uma lista e você quer que cada um dos botoes Excluir esteja atrelado ao mesmo evento. O que você pode fazer é o seguinte:

var excluirLinha = document.querySelectorAll(".excluir");

excluirLinha.forEach((value) => { 
    value.addEventListener("click", function(event){
        var alvoEvento = event.target;
        var paiDoAlvo = alvoEvento.parentNode;

        paiDoAlvo.remove();
    })
});

Espero ter ajudado

Henrique, desculpa a demora em responder... Obrigado pela resposta. Resolveu meu problema. Valeu.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software