Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] Quais alternativas para evitar remover o header da tabela?

Referente ao curso JavaScript: programando na linguagem da web, no capítulo Remoção, Delegação e Animação e atividade Delegando eventos

por Jarson Neri Silva De Morais
| 17.3k xp | 4 posts

Do jeito que a solução foi apresentada, o duplo clique no cabeçalho também remove essa linha;

Para resolver esse probleminha eu apontei para o "tabela-pacientes", ficando assim:

var tabela = document.querySelector("#tabela-pacientes");
//var tabela = document.querySelector("tbody");         //também funcionaria

tabela.addEventListener("dblclick",function(event){

    event.target.parentNode.classList.add("fadeOut");

    setTimeout(function(){
        event.target.parentNode.remove();
    },500);

})

Mas se eu quiser deixar definido o evento no "table", como eu poderia verificar se o evento foi no cabeçalho?

2 respostas
solução!
por Rafael Rocha
| 2641.1k xp | 5598 posts
Alura Scuba Team Time Alura | Apoio Educacional no Fórum

Olá Jarson, como você está?

Peço desculpas pela demora em obter um retorno.

Temos algumas formas para alcançar a remoção sem excluir o header. Uma delas é a forma apresentada por você, usando o id #tabela-pacientes. Outra possibilidade é utilizarmos a seleção do elemento table e fazermos uma condicional que verifica se o elemento clicado é uma célula da tabela (TD) e caso seja, a remoção será efetuada. Veja como fica em código:

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

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

tabela.addEventListener("dblclick", function(event) {
    if (event.target.tagName == 'TD'){
        event.target.parentNode.classList.add("fadeOut");
        setTimeout(function() {
            event.target.parentNode.remove()

        }, 500);
    }

});

Acrescento também no final da atividade Mãos na massa: removendo os pacientes, o instrutor dá uma dica valiosa para evitar a remoção do cabeçalho. Vale a pena conferir!

Espero ter ajudado.

Não hesite em voltar ao fórum para continuar aprendendo e interagindo com a comunidade.

Em caso de dúvidas estou à disposição.

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por Jarson Neri Silva De Morais
| 17.3k xp | 4 posts

Sem problema, eu que me antecipei na pergunta. Acabei encontrando as respostas que buscava enquanto avançava no curso.