Skip to content

JavaScript confirm delete before delete | Code

Use the Window confirm() method on the client side to confirm delete before deleting in JavaScript. When you want to verify the user or delete something, it is always a good idea to confirm the request before processing.

var result = confirm("Want to delete?");
if (result) {
    //Logic to delete the item
}

The confirm() method shows a dialog box with a message and two buttons (OK and Cancel). This method returns true, if the user clicks OK, otherwise false.

JavaScript confirm delete

A simple example code confirmation message shows on clicking delete (this may be a button or an image). If the user selects ‘Ok‘ then delete is done, else if ‘Cancel‘ is clicked nothing happens.

This is onclick event of the button:

<!DOCTYPE html>
<html>
<body>
  <button onclick="confirmation()">Delete</button>

  <script>
    function confirmation(){
      var result = confirm("Are you sure to delete?");
      if(result){
        console.log("Deleted")
      }
    }
  </script>

</body>
</html>

Output:

JavaScript confirm delete

You can also use the confirm() method to show the confirm box on the anchor link (a href tag) click. Code snippet shows how to display a confirmation dialog when clicking anchor link using onclick() event.

<a href="action.php" onclick="return confirm('Are you sure to delete?')">Delete</a>

To create a JavaScript confirmation dialog for deleting something, you can use the confirm() function. Here’s a simple example:

<!DOCTYPE html>
<html>
<head>
  <title>Delete Confirmation</title>
  <script>
    function confirmDelete() {
      var result = confirm("Are you sure you want to delete?");
      if (result) {
        // Code to execute if user confirms
        alert("Item deleted successfully!");
        // You can add further actions like submitting a form or making an AJAX request for deletion
      } else {
        // Code to execute if user cancels
        alert("Deletion cancelled.");
      }
    }
  </script>
</head>
<body>
  <button onclick="confirmDelete()">Delete Item</button>
</body>
</html>

In this example:

  • The confirmDelete() function is called when the button is clicked.
  • Inside confirmDelete(), confirm() function is called with the message “Are you sure you want to delete?”. It will display a dialog box with “OK” and “Cancel” buttons.
  • Depending on whether the user clicks “OK” or “Cancel”, confirm() returns true or false respectively.
  • If the user clicks “OK”, the result will be true, and you can proceed with the deletion.
  • If the user clicks “Cancel”, the result will be false, and you can handle it accordingly, maybe by doing nothing or showing a message.

You can customize this code to suit your specific requirements, such as integrating it with your backend to perform actual deletion operations.

Do comment if you have any doubts or suggestions on this Js confirm box topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Tags:

1 thought on “JavaScript confirm delete before delete | Code”

Leave a Reply

Your email address will not be published. Required fields are marked *