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

Teste de DNA: Será que esse é o pai que eu quero???

Boa tarde, Conselho Jedi da Alura. Nessa aula, vimos que ao delegar o listener para o pai (table) temos uma melhor performance e conseguimos tratar eventos em linhas recém criadas.

Clicando numa TD (alvo) pegamos seu parentNode (TR) e removemos o mesmo. Até aí tudo feliz e contente, como diria um professor meu.

Mas "e se" tivéssemos uma ou duas TDs dessa linha com um SPAN (para estilizar melhor) ou uma IMG dentro. O alvo passaria a ser esse (SPAN ou IMG) e o respectivo "parentNode" seria a TD e essa seria excluída.

Como tratar essa situação???

2 respostas
solução!

Olá Rafael, Você pode testar se o alvo clicado é de fato a tag que você está interessado, no caso um <span> por exemplo. Caso seja, você faz uma coisa, caso não seja, faça outra. Podemos detectar qual tipo de tag foi clicado com a propriedade nodeName

Veja o exemplo abaixo fiz para demonstrar isso:

    <table>
        <tr>
            <td>Td Puro</td>
        </tr>
        <tr>
            <td><span>Teste1</span><span>Teste2</span></td>
        </tr>
        <tr>
            <td><span>Teste1</span><span>Teste2</span></td>
        </tr>
    </table>
    <script>
        var tabela = document.querySelector("table");

        tabela.addEventListener("click", function(event){
            console.log(event.target.nodeName );
            if(event.target.nodeName == 'SPAN'){
                console.log("Agora foi clicado em um span");
                event.target.parentNode.parentNode.remove();
            }else{
                console.log("Agora foi clicado em um td puro");
                event.target.parentNode.remove()
            }
        });
    </script>

Excelente explicação!