no caso eu queria ir removendo enquanto o meu usuario vai digitando, sem usar um botão ou algo do tipo
meus dados estão mockados no js tentei criar um classe usando o classList.add() e chamar mas não consegui
minha tabela
let pessoas =[
{nome: 'Victor', telefone: 21935484773},
{nome: 'Michelle', telefone: 11974450073},
{nome: 'Augusto', telefone: 11979984073},
{nome: 'José', telefone: 11954454075},
{nome: 'Valter', telefone: 11977458473},
{nome: 'Joana', telefone: 11944488576},
{nome: 'Rodrigo', telefone: 11873484973},
{nome: 'Renata', telefone: 11975584073}
];
let tbody = document.querySelector('#tabela-usuarios');
window.onload = criaTabela(pessoas);
function criaTabela(listaPessoas){
listaPessoas.forEach((pessoa) => {
let tr = document.createElement("tr");
let tdNome = document.createElement("td");
let tdTelefone = document.createElement("td");
tdNome.textContent = pessoa.nome;
tdTelefone.textContent = pessoa.telefone;
tr.appendChild(tdNome);
tr.appendChild(tdTelefone);
tbody.appendChild(tr);
})
}
meu filtro
let campoBusca = document.querySelector("#campo-busca");
campoBusca.addEventListener("input",()=>{
let valor = campoBusca.value.toLowerCase();
let expNome = new RegExp (`\\D`, 'i').test(valor);
let expTelefone = new RegExp (`\\d`, 'g').test(valor);
console.log(expTelefone);
if(expNome == true) {
let retornoPessoas = pessoas.filter((pessoa)=>{
return pessoa.nome.toLowerCase().startsWith(valor);
})
criaTabela(retornoPessoas);
}else{
let retornoTelefone = pessoas.filter((pessoa)=>{
return pessoa.telefone.toString().startsWith(valor);
});
}
})
meu html
<div class="container mt-5 px-5">
<div class="input-group rounded mb-4">
<input id="campo-busca"
type="text"
class="form-control rounded"
placeholder="Search"
aria-label="Search"
aria-describedby="search-addon"
/>
</div>
<table class="table mt-4 mb-5">
<thead class="table-dark">
<tr>
<th scope="col">Nome</th>
<th scope="col">Telefone</th>
</tr>
</thead>
<tbody id="tabela-usuarios">
</tbody>
</table>
</div>