Novo paciente adicionado fica visível durante todas as pesquisas | JavaScript: programando na linguagem da web

</head>
<body>

    <header>
        <div class="container">
            <h1>Aparecida Nutrição</h1>
        </div>
    </header>
    <main>
        <section class="container">
            <h2>Meus pacientes</h2>
            <label for="filtrar-tabela">Flltro</label>    
            <input type="text" id="filtrar-tabela" placeholder="Campo de busca">
            <table>
                <thead>
                    <tr>
                        <th>Nome</th>
                        <th>Peso(kg)</th>
                        <th>Altura(m)</th>
                        <th>Gordura Corporal(%)</th>
                        <th>IMC</th>
                    </tr>
                </thead>
                <tbody id="tabela-pacientes">
                    <tr class="paciente" id="primeiro-paciente">
                        <td class="info-nome">Paulo</td>
                        <td class="info-peso">63</td>
                        <td class="info-altura">1.75</td>
                        <td class="info-gordura">10</td>
                        <td class="info-imc">0</td>
                    </tr>

                    <tr class="paciente" >
                        <td class="info-nome">João</td>
                        <td class="info-peso">800</td>
                        <td class="info-altura">1.72</td>
                        <td class="info-gordura">40</td>
                        <td class="info-imc">0</td>
                    </tr>

                    <tr class="paciente" >
                        <td class="info-nome">Erica</td>
                        <td class="info-peso">40</td>
                        <td class="info-altura">1.64</td>
                        <td class="info-gordura">14</td>
                        <td class="info-imc">0</td>
                    </tr>

                    <tr class="paciente">
                        <td class="info-nome">Douglas</td>
                        <td class="info-peso">85</td>
                        <td class="info-altura">1.73</td>
                        <td class="info-gordura">24</td>
                        <td class="info-imc">0</td>
                    </tr>
                    <tr class="paciente" >
                        <td class="info-nome">Tatiana</td>
                        <td class="info-peso">46</td>
                        <td class="info-altura">1.55</td>
                        <td class="info-gordura">19</td>
                        <td class="info-imc">0</td>
                    </tr>
                </tbody>
            </table>

        </section>
    </main>

    <section class="container">
        <h2 id="titulo-form">Adicionar novo paciente</h2>
        <ul id="mensagensDeErro">

        </ul>
        <form id="form-adiciona">
            <div class="grupo">
                <label for="nome">Nome:</label>
                <input id="nome" name="nome" type="text" placeholder="digite o nome do seu paciente" class="campo" required>
            </div>
            <div class="grupo">
                <label for="peso">Peso:</label>
                <input id="peso" name="peso" type="text" placeholder="digite o peso do seu paciente" class="campo campo-medio">
            </div>
            <div class="grupo">
                <label for="altura">Altura:</label>
                <input id="altura" name="altura" type="text" placeholder="digite a altura do seu paciente" class="campo campo-medio">
            </div>
            <div class="grupo">
                <label for="gordura">% de Gordura:</label>
                <input id="gordura" name="gordura" type="text" placeholder="digite a porcentagem de gordura do seu paciente" class="campo campo-medio">
            </div>

            <button id="adicionar-paciente" class="botao bto-principal">Adicionar</button>
        </form>
    </section>

    <script src=js/calcula_imc.js></script>
    <script src=js/formv1.js></script>
    <script src=js/remover-pacientes.js></script>
    <script src="js/filtrar.js"></script>

</body>

var campoFiltro = document.querySelector("#filtrar-tabela");
console.log(campoFiltro);


/*O evento "input" serve para sabermos quando algo for digitado no input. */ 
campoFiltro.addEventListener("input", function(){
    console.log(this.value);

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

    if(this.value.length > 0){
        for(i=0; i<pacientes.length; i++){
            var paciente = pacientes[i];
            var tdNome =paciente.querySelector(".info-nome");
            var nome = tdNome.textContent;

            if(this.value != nome){
                paciente.classList.add("invisivel");
            }
            else{
                paciente.classList.remove("invisivel");
            }
        } 
    }

    else{
        for(i=0; i < pacientes.length; i++){
            var paciente = pacientes[i];

            paciente.classList.remove("invisivel");
        }
    }       
})