Exibir uma mensagem de confirmação antes de deletar algo em JS

Neste artigo você vai aprender a como exibir uma mensagem de confirmação antes de deletar algum item, utilizando JavaScript.

Fala programador(a), beleza? Bora aprender mais sobre JavaScript!

A interação do usuário com um aplicativo da web ou software é crucial para uma experiência de usuário positiva. Uma dessas interações importantes ocorre quando o usuário deseja excluir alguma coisa.

O termo técnico é ‘destrutivo’ ou ‘ação destrutiva’, que se refere a uma ação que muda irreversivelmente o estado de algo.

No caso da exclusão, os dados são permanentemente removidos e geralmente não podem ser recuperados. Por isso, é essencial exibir uma mensagem de confirmação antes de deletar.

Criando uma Mensagem de Confirmação

O JavaScript é a linguagem perfeita para gerenciar essas interações do usuário.

A função embutida confirm() do JavaScript exibe uma caixa de diálogo com uma mensagem especificada e dois botões: OK e Cancelar.

let userConfirmation = confirm("Você tem certeza de que deseja deletar este item?");

Neste exemplo, a caixa de diálogo exibirá a pergunta “Você tem certeza de que deseja deletar este item?”.

Se o usuário clicar em OK, userConfirmation será true. Se o usuário clicar em Cancelar, userConfirmation será false.

Implementando a Função de Deletar

Suponha que você tenha uma lista de itens que o usuário pode excluir. Cada item tem um botão de exclusão associado.

Quando o usuário clica no botão de exclusão, uma função é chamada para deletar o item correspondente.

Aqui está como você pode implementar a função de exclusão:

function deleteItem(itemId) {
  // Primeiro, exibir a mensagem de confirmação
  let userConfirmation = confirm("Você tem certeza de que deseja deletar este item?");
  
  // Se o usuário confirmou a exclusão
  if(userConfirmation) {
    // Delete o item
    // Código para deletar o item vai aqui
    console.log(`Item ${itemId} deletado.`);
  }
  // Se o usuário cancelou a exclusão
  else {
    // Não faça nada
    console.log('Operação de exclusão cancelada.');
  }
}

A função deleteItem recebe um itemId como parâmetro. Primeiro, exibe a mensagem de confirmação. Se o usuário confirmar a exclusão, o código para deletar o item é executado.

Se o usuário cancelar a exclusão, nada acontece.

Personalizando Mensagens de Confirmação com Modal

O método confirm() do JavaScript é simples e fácil de usar, mas também é bastante básico. A mensagem e os botões não podem ser estilizados, e você só pode exibir um texto simples.

Se você quiser uma mensagem de confirmação mais sofisticada e personalizada, pode criar um modal de confirmação.

Um modal é uma caixa de diálogo que aparece na frente do conteúdo da página.

A página em si é geralmente escurecida e não pode ser interagida enquanto o modal está aberto. Você pode usar HTML, CSS e JavaScript para criar um modal.

Aqui está um exemplo básico de um modal de confirmação:

<div id="confirmationModal" class="modal">
  <div class="modal-content">
    <h2>Confirmar Exclusão</h2>
    <p>Tem certeza de que deseja deletar este item?</p>
    <button id="confirmDelete">Deletar</button>
    <button id="cancelDelete">Cancelar</button>
  </div>
</div>

E o CSS para estilizá-lo:

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

E por fim, o JavaScript para manipular o modal:

let modal = document.getElementById('confirmationModal');
let confirmButton = document.getElementById('confirmDelete');
let cancelButton = document.getElementById('cancelDelete');

function deleteItem(itemId) {
  // Primeiro, exibir o modal de confirmação
  modal.style.display = "block";
  
  // Quando o usuário clica no botão Deletar
  confirmButton.onclick = function() {
    // Deletar o item
    // Código para deletar o item vai aqui
    console.log(`Item ${itemId} deletado.`);
    
    // Fechar o modal
    modal.style.display = "none";
  }
  
  // Quando o usuário clica no botão Cancelar
  cancelButton.onclick = function() {
    // Não faça nada
    console.log('Operação de exclusão cancelada.');
    
    // Fechar o modal
    modal.style.display = "none";
  }
}

Nesse código, primeiramente obtemos o modal e os botões de confirmação e cancelamento. Em seguida, definimos a função deleteItem para exibir o modal de confirmação quando chamada.

Quando o usuário clica no botão Deletar, a ação de exclusão é realizada e o modal é fechado.

Quando o usuário clica no botão Cancelar, o modal simplesmente fecha sem executar a ação de exclusão.

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Exibir uma mensagem de confirmação antes de deletar algo é uma prática recomendada que protege o usuário de deletar acidentalmente dados importantes.

Com JavaScript, você pode implementar facilmente mensagens de confirmação em seus aplicativos da web.

Seja usando a função built-in confirm() ou criando um modal personalizado, as possibilidades são muitas e você pode escolher a abordagem que melhor atende às suas necessidades e as de seus usuários.

Está buscando em evoluir como Programador? Confira o nossos cursos clicando aqui.

Nosso principal objetivo é tornar você um dev profissional que é capaz de resolver problemas de alta dificuldade e criar projetos complexos, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.

Cursos com vários projetos, exercícios, material apoio, comunidade de alunos e muito mais!