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.

Delete

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
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.