qinaction / swipeout

Swipe-to-delete goodness for the mobile web

SwipeOut

🏄 Swipe-to-delete goodness for the mobile web

View demo

🍊 Battle-tested at Instacart

Usage

It’s easy to get started

Instantiate SwipeOut on a <ul> or <ol> element.

var list = document.getElementById("list");
new SwipeOut(list);

When an item is deleted, a delete event is fired.

Javascript

list.addEventListener("delete", function(evt) {
  // do something, like an ajax call to server
  // evt.target references the list item
});

jQuery or Zepto

$("#list li").on("delete", function(evt) {
  // ...
});

Install

SwipeOut requires Hammer.js. Include the following two files on your website:

Hammer.js and SwipeOut

Just over 3kb total when minified and gzipped

<script src="path/to/hammer.js"></script>
<script src="path/to/swipeout.js"></script>

Customize

The delete button is unstyled by default. Give it a custom style, like an iOS theme:

.swipe-out .delete-btn {
  padding: 6px 8px;
  border-radius: 6px;
  border: solid 1px rgb(96,23,18);
  background-image: linear-gradient(top, rgb(242,153,157), rgb(213,62,41));
  background-image: -webkit-linear-gradient(top, rgb(242,153,157), rgb(213,62,41));
  background-image: -moz-linear-gradient(top, rgb(242,153,157), rgb(213,62,41));
  background-image: -o-linear-gradient(top, rgb(242,153,157), rgb(213,62,41));
  text-shadow: 0em -0.1em rgb(51,51,51);
  color: #fff;
  font: bold 14px/20px "Helvetica Neue", Arial, Helvetica, sans-serif;
}

The delete button text can be set with:

new SwipeOut(list, {btnText: "Remove"}); // default: "Delete"