A Safer Delete Experience

Clicking a deleted button creates a dropdown with a confirmation and cancel button. This requires two click actions from the user, helping to prevent accidental deletions.

The markup is declarative with customizable prompt text, button text, and cancel text.

    
<a href="javascript:alert('deleted!');"
   class="btn--red"
   data-deleted=true
   data-deleted-prompt="Are you sure you want to delete this?"
   data-deleted-text="Confirm"
   data-cancel-text="Cancel">
  Delete
</a>
    

There are no added dependencies, deleted is 100% vanilla JavaScript.

A customized example

  Custom Delete

    
<a href="javascript:alert('custom deleted!')"
   class="btn--red"
   data-deleted=true
   data-deleted-prompt="Look out, there be dragons."
   data-deleted-text="Go ahead, delete it"
   data-cancel-text="Nevermind">
  {{trash-icon}}
  Custom Delete
</a>
    

Installing deleted

It's available on npm, bower, and github.

    
npm i --save deleted
bower i --save deleted
git clone https://github.com/johnotander/deleted
    

What's missing?

Currently, support needs to be added for ARIA attributes to ensure that this delete concept is accessible.