[Dúvida] reload na página | JS na web: CRUD com JavaScript assíncrono

Não entendi o por que da página fazer o reload quando é deletado na tabela. Tentei usar o preventDefault e não funcionou. O código está de acordo com o do professor e não encontrei a solução nas outros tópicos abertos.

Segue o link do código: https://github.com/mmorilhas/crud-com-js-assincrono/tree/feature-deletandoCliente

Em cliente-service.js

const listaCLientes = () =>{
  return fetch(`http://localhost:3000/profile`)
  .then(resposta => {
    return resposta.json();
  })
}

const criaCLiente = (nome, email) => {
  return fetch(`http://localhost:3000/profile`, {
    method: 'POST',
    headers:{
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      nome: nome,
      email: email
    })
  })
  .then(resposta => {
    return resposta.body
  })
}


const removeCliente = (id) => {
  return fetch(`http://localhost:3000/profile/${id}`, {
    method: 'DELETE',
  })
}

export const clienteService = {
  listaCLientes,
  criaCLiente,
  removeCliente
}

Em listaClientes-controller.js

import { clienteService } from "../service/cliente-service.js";

const criaNovaLinha = (nome, email, id) => {
  const novaLinhaCliente = document.createElement('tr');

  const conteudo = `
    <td class="td" data-td>${nome}</td>
      <td>${email}</td>
      <td>
        <ul class="tabela__botoes-controle">
          <li><a href="../telas/edita_cliente.html" class="botao-simples botao-simples--editar">Editar</a></li>
          <li><button class="botao-simples botao-simples--excluir" type="button">Excluir</button></li>
        </ul>
      </td> 
  `;

  novaLinhaCliente.innerHTML = conteudo;
  novaLinhaCliente.dataset.id = id;

  return novaLinhaCliente;
}


const tabela = document.querySelector('[data-tabela]');

tabela.addEventListener('click', (evento) => {
  let ehBotaoDeletar = evento.target.className === 'botao-simples botao-simples--excluir'

  if(ehBotaoDeletar){
    const linhaCliente = evento.target.closest('[data-id]');
    let id = linhaCliente.dataset.id;
    clienteService.removeCliente(id)
    .then(() => {
      linhaCliente.remove()
    })
  }
})


clienteService.listaCLientes()
.then(data => {
  data.forEach(element => {
    tabela.appendChild(criaNovaLinha(element.nome, element.email, element.id));
  });
})

Oii, Dev! Tudo bem?

Agradeço por aguardar o nosso retorno.

Obrigada por compartilhar o seu código conosco. Isso acontece porque, ao clicar no botão "Excluir", o evento de clique é acionado e, em seguida, é feita uma requisição para o servidor para deletar o cliente. Quando a resposta do servidor chega confirmando a exclusão, a linha do cliente é removida da tabela. Porém, como não foi especificado nenhum comportamento após a exclusão, a página é recarregada automaticamente.

Para evitar que isso aconteça, você pode adicionar um return false no final do evento de clique do botão "Excluir" para cancelar o comportamento padrão do botão. Assim, a página não será recarregada.

No seu código, você pode adicionar o return false logo após a linha linhaCliente.remove(), como no exemplo abaixo:

clienteService.removeCliente(id)
.then(() => {
  linhaCliente.remove();
  return false;
})

Faça as alterações e observe se o código tem o comportamento esperado.

Esperto ter ajudado. Qualquer dúvida, fico à disposição.

Bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓