How to show a confirm message before delete?

javascript

prompt-engineering

web-development

best-practices

byAnton Shumikhin·Jan 9, 2025

Kick-start a confirmation dialog using JavaScript's confirm() function with the onclick event:

<button onclick="return confirm('Are you about to yolo-delete this data?');">Delete</button>

Clicking 'OK' gives a green light to delete, and 'Cancel' hits the brakes.

Grasping the essence of user confirmation

Deleting is often irreversible. Providing a catch-net in form of a confirmation using the confirm() function lets users take a second glance at their decision, potentially avoiding data disaster.

Directing user interaction

onclick event is every web developer's trusty sidekick. Coupling it with the confirm() function gives users an intuitive option to reconsider the delete command:

<a href="#" onclick="return confirm('You sure you wanna let this go, pal?');">Delete</a>

Staying cool with design

The confirm() dialog is a native element, so it chillingly coexists with your existing page design without causing any stylistic havoc.

Drawing a line between HTML and JavaScript

Keeping HTML and JavaScript in their respective lanes makes for cleaner and neater coding. How about this:

function considerBeforeYouDelete() {
    let userResponse = confirm('Are you sure you want to send this data into oblivion?');
    if (userResponse) {
        // Handle the deletion, James Bond style!
    }
}

And the HTML goes:

<button onclick="return considerBeforeYouDelete()">Delete</button>

Mastering enhanced confirmations

Further beautify the user experience and code maintenance with some nifty techniques.

Using data attributes as secret messages

HTML5 data-* attributes offer a neat way to tuck away confirmation messages in your HTML, resulting in clean JavaScript and well-separated functionality:

<button data-confirm="Are you brave enough to delete this?">Delete</button>

Then, summon the attribute from JavaScript:

document.querySelector('button[data-confirm]').onclick = function() {
    return confirm(this.getAttribute('data-confirm'));
};

Stopping the unstoppable event

For advanced delete scenarios, preventDefault() function keeps things in check until user confirms the delete action:

document.querySelector('button[data-confirm]').onclick = function(e) {
    if (!confirm(this.getAttribute('data-confirm'))) {
        e.preventDefault(); // Not today, deletion command!
    }
};

Embracing all the browsers

Make sure your code is a friendly neighborhood web developer, supporting a wide variety of browsers - yes, even the prehistoric Internet Explorer!

Diving into custom solutions

When confirm() begins to feel too vanilla, mix things up with some sophisticated approaches to take your application's usability a notch higher.

How about a custom-built modal that allows you to call the shots on styling and interaction, and doesn't give a hoot about ad-blockers?

<div id="customModal" class="modal">
  <div class="modal-content">
    <p>Are you absolutely sure about deleting this?</p>
    <button id="yesDelete">Yes, I live dangerously</button>
    <button id="noDelete">No, save it like a superhero!</button>
  </div>
</div>

In JavaScript, show and hide the modal as needed and handle button actions:

document.getElementById('yesDelete').onclick = function() {
    // Deletion procedures in place. Red alert!
    disappearModal();
};

document.getElementById('noDelete').onclick = function() {
    // Cancel alert. Stand down.
    disappearModal();
};

function disappearModal() {
    document.getElementById('customModal').style.display = 'none';
}