4
respostas

Não está funcionando o remover paciente

Olá, boa tarde!

Não está funcionando a função de remover o paciente da tabela, já tentei de tudo pra ver onde está o erro e não encontro. Está dando um erro no console

Fala que essa linha tem erro tabela.addEventListener('dblclick', function(event) { Uncaught TypeError: Cannot read property 'addEventListener' of null at remover-paciente.js:5

Poderiam me ajudar???

4 respostas

Olá Maria, boa tarde!

Achei essa solução no stack overflow, veja se ajuda.

Caso não resolva, você pode colocar seu código aqui ? Acredito que ajudará a acharmos a solução.

Espero ter ajudado :)

Vou coloca o código aqui

var pacientes = document.querySelectorAll('.paciente')

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

tabela.addEventListener('dblclick', function(event) { event.target.parentNode.remove()

})

No erro do console aparece que tem um erro na linha tabela.addEvent

Olá Maria, tudo bem?

Acredito que identifiquei o porque do console estar lançando este erro. Tente retirar do seu código a "#" do ('#table')

Ficando a linha de código desta forma:

var tabela = document.querySelector('table')

Ao invés de:

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

Quando o console mostra a mensagem abaixo:

Cannot read property 'addEventListener' of null at remover-paciente.js:5

Quer dizer que o addEventListenner não consegue ler o que vem dentro da var tabela , ou seja, o #table.

Mas qual a razão disso? O #table esta com a # e o querySelector busca por um id lá no seu HTML

Uma explicação mais clara com alguns exemplos de quando o código faz referência à classe, id e tag seria:

Neste caso quando utilizamos o " . " ou seja, .paciente o query busca pela classe paciente lá no seu HTML

JS

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

HTML

<tr class="paciente">

E neste outro caso com a # em #tabela-pacientes o query busca lá no arquivo HTML pelo id tabela-pacientes.

JS

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

HTML

<tbody id="tabela-pacientes">

O ultimo caso, e o que vamos utilizar, é a tag table

HTML

<table>

JS

var tabela = document.querySelector('table')

Ao retirarmos a # iremos delegar a responsabilidade de escutar os eventos para o "pai de todos", no caso, a tag table: Por este motivo sua linha de código ficará assim:

var tabela = document.querySelector('table')

E por esta razão, quando o querySelector for buscar por table, ele retornará a tag table pai de todos.

Espero que seja este o detalhe e que possa ter te ajudado

Até mais

Parabéns Gabriela pela resposta. Completa!

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