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