0
respostas

apos filtrar a minha tabela queria apagar a minha antiga.

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>