Deleted provides a slightly different experience for hard deletes. Clicking a delete button creates a dropdown with a confirmation and cancel button. This requires two click actions from the user, helping to prevent accidental deletions.
It's dependency-free and delightfully lightweight:
deleted.min.js 711 B (gzipped)
deleted.min.css 490 B (gzipped)
See it in action: http://johnotander.com/deleted.
npm install --save deleted
Or with git
git clone https://github.com/johnotander/deleted.git
Link the javascript and CSS files:
<!DOCTYPE html>
<html>
<head>
<!-- ... -->
<link rel="stylesheet" href="/path/to/deleted/css/deleted.min.css">
<!-- ... -->
</head>
<body>
<!-- ... -->
<script src="/path/to/deleted/js/deleted.min.js"></script>
</body>
</html>Then, you can use deleted with the following link and data attributes:
<a href="/some-link/for/deletion"
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><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">
Custom Delete
</a>MIT
- Fork it
- Create your feature branch (
git checkout -b my-new-feature) - Commit your changes (
git commit -am 'Add some feature') - Push to the branch (
git push origin my-new-feature) - Create new Pull Request
Crafted with <3 by John Otander (@4lpine).