A classe "invisivel" não entra em pacientes inseridos na tabela

Shirley, boa tarde!

O instrutor na aula: https://cursos.alura.com.br/course/javascript-programando-na-linguagem-web/task/24412

explica um conceito chamado event bubbling onde o elemento pai que fica ouvindo os eventos, assim ele consegue executar as ações dos filhos. Esse problema era pra ocorrer mesmo (caso você não tiver chego na aula acima)

Espero ter ajudado e bons estudos!

Olá. obrigada pela resposta, mas não me refiro a essa parte. Me refiro a filtragem. Sempre aparece o paciente que pedi para ser filtrado e o que foi inserido, quando na verdade deveria aparecer só um.

https://cursos.alura.com.br/course/javascript-programando-na-linguagem-web/task/24465

Por favor, vocês poderiam olhar o meu código? Preciso muito continuar o curso e não consigo achar o erro. Segue o link do meu github com o código:

https://github.com/shirleyags/nutricao

Shirley, boa tarde!

Isso ocorre devido os itens que estão sendo filtrados serem apenas os predefinidos e não os itens que foram adicionados. Após cada input selecione os pacientes novamente, como no exemplo abaixo

campoFiltro.addEventListener('input',function(){
const pacientes = document.querySelectorAll(".paciente");
//SEU CÓDIGO ABAIXO FOI OMITIDO

Espero ter ajudado e bons estudos!

Como faço isso, por favor?

Shirley, ficaria assim, é práticamente o mesmo código só adicionei a linha comenrada

const campoFiltro = document.querySelector('#filtrar-tabela');

campoFiltro.addEventListener('input',function(){
const pacientes = document.querySelectorAll(".paciente"); //Atulizando os pacientes a cada novo input
    if(this.value.length > 0){
        for(let i = 0; i < pacientes.length; i++){  

            const paciente = pacientes [i];

            const tdNome = paciente.querySelector(".info-nome");
            const nome = tdNome.textContent;

            if (nome != this.value){
                paciente.classList.add('invisivel');
            }
            else{
                paciente.classList.remove('invisivel');
            }
        }
    }
    else{
        for(let i = 0; i < pacientes.length; i++){
            const paciente = pacientes [i];
            paciente.classList.remove('invisivel');
        }
    };
});

Espero ter ajudado e bons estudos!

No arquivo "calcula-imc.js" já consta a "const pacientes", por isso não reproduzi a linha inteira no arquivo filtra.js. No arquivo filtra.js pensei em reaproveitar a const já existente e a declarei no for, conforme abaixo:

if(this.value.length > 0){ for(let i = 0; i < pacientes.length; i++){

        const paciente = pacientes [i];

Por que não posso fazer isso? Por que funciona para os pacientes que estão no arquivo HTML, mas não para os que são inseridos?