Excelente lo realizado, no he podido pensar en alguna solución que funcione, así que mire la opinión del instructor!
// ------------- crear la variable donde vamos a ubicar la clase del html--------->
var campoFiltro= document.querySelector("#filtrar-tabla")
campoFiltro.addEventListener("input", function(){ // crear el capturador de eventos para la variable
var pacientes = document.querySelectorAll(".paciente"); // capturar la lista de pacientes
if(this.value.length > 0) { // creamos la condicion respecto del valor del objeto y lo comparamos con el campo vacio del input
//<------------------ creamos el bucle que recorrera los nombres----->
for(var i = 0; i< pacientes.length; i++) {
var paciente = pacientes[i];
var tdNombre = paciente.querySelector(".info-nombre");// estas 3 variables van creadas una en funcion de la que sigue para que sean llamadas
var nombre = tdNombre.textContent;
//----------creamos la expresion regular para comparar el valor ingresado con el teclado
// se le pasan los parametros (padro, es el elemento buscado y la flag, representa la forma de la busqueda)
var expresion = new RegExp(this.value, "i") // las RegExp nos permite comparar lo ingresado en este caso con lo que ya esta
if(!expresion.test(nombre)) { // le decimos a la condicion que compare la expresion ingresada con el nombre
paciente.classList.add("invisible"); // agregamos la clase de css
}else{
paciente.classList.remove("invisible");
}
}
// si no cumple con la condicion de arriba, le pedimos que remueva la clase invisible
} else {
for(var i = 0; i< pacientes.length; i++) {
var paciente = pacientes [i]
paciente.classList.remove("invisible")
}
}
})
/*
<-------ESTA ES OTRa OPCION PARA NO UTILIZAR EXPRESIONES REGULARES----------->
<-------INCLUSO COMPARA TODO EN MINUSCULA------------------->
var comparar = nombre.substring(0, this.value.length);
var compararMinuscula = comparar.toLowerCase();
var valorDigitadoMinuscula = this.value.toLowerCase();
if(!(valorDigitadoMinuscula == compararMinuscula )){
paciente.classList.add("invisible");
} else {
paciente.classList.remove("invisible");
}
*/ 
