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:
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()returnstrueorfalserespectively. - If the user clicks “OK”, the
resultwill betrue, and you can proceed with the deletion. - If the user clicks “Cancel”, the
resultwill befalse, 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
i tried this piece of code and “cancel” also deletes items. what do i do