JSFiddle - React, Tailwind, and code Playground

HTML

<div data-role="page">
    <div data-role="header" data-position="fixed">
         <h1>Swipe Delete</h1>

    </div>
    <div data-role="content">
        <ul data-role="listview">
            <li>
                <div class="behind"> <a class="ui-btn delete-btn">Delete</a>

                </div> <a class='move'>item</a>

            </li>
            <li>
                <div class="behind"> <a class="ui-btn delete-btn">Delete</a>

                </div> <a class='move'>item</a>

            </li>
            <li>
                <div class="behind"> <a class="ui-btn delete-btn">Delete</a>

                </div> <a class='move'>item</a>

            </li>
            <li>
                <div class="behind"> <a class="ui-btn delete-btn">Delete</a>

                </div> <a class='move'>item</a>

            </li>
            <li>
                <div class="behind"> <a class="ui-btn delete-btn">Delete</a>

                </div> <a class='move'>item</a>

            </li>
            <li>
                <div class="behind"> <a class="ui-btn delete-btn">Delete</a>

                </div> <a class='move'>item</a>

            </li>
            <li>
                <div class="behind"> <a class="ui-btn delete-btn">Delete</a>

                </div> <a class='move'>item</a>

            </li>
            <li>
                <div class="behind"> <a class="ui-btn delete-btn">Delete</a>

                </div> <a class='move'>item</a>

            </li>
            <li>
                <div class="behind"> <a class="ui-btn delete-btn">Delete</a>

                </div> <a class='move'>item</a>

            </li>
            <li>
                <div class="behind"> <a class="ui-btn delete-btn">Delete</a>

                </div> <a class='move'>item</a>

            </li>
            <li>
                <div class="behind"> <a class="ui-btn delete-btn">Delete</a>

                </div> <a class='move'>item</a>

            </li>
            <li>
               ...

CSS

.behind {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
    }
    .behind a.ui-btn {
        width: 68px;
        margin: 0px;
        float: left;
        border: none;
        color: white;
        background-color: red;
        text-shadow: none;
    }

JavaScript

var startPos;
var handlingTouch = false;
var itemis;
setTimeout(function() {

document.addEventListener('touchstart', function(e) {
  // Is this the first finger going down? 
 
  if (e.touches.length == e.changedTouches.length) {
    startPos = {
      x: e.touches[0].clientX,
      y: e.touches[0].clientY
    };
  }
});

document.addEventListener('touchmove', function(e) {
  // If this is the first movement event in a sequence:
  if (startPos) {
    // Is the axis of movement horizontal?
    if (Math.abs(e.changedTouches[0].clientX - startPos.x) > Math.abs(e.changedTouches[0].clientY - startPos.y)) {
      handlingTouch = true;
      e.preventDefault();
      onSwipeStart(e);
    }
    startPos = undefined;
  } else if (handlingTouch) {
    e.preventDefault();
    onSwipeMove(e);
  }
});

document.addEventListener('touchend', function(e) {
  if (handlingTouch && e.touches.length == 0) {
    e.preventDefault();
    onSwipeEnd(e);
    handlingTouch = false;
  }
});



function slide(x) {
 
$(itemis).css({transform: "translatex("+x+"px)"})
}

var swipeOrigin, x, itempos;
function onSwipeStart(e) {
  itemis = $(e.target).closest("li").find(".move")
  swipeOrigin = e.touches[0].clientX;
}
function onSwipeMove(e) {
  x = e.touches[0].clientX - swipeOrigin;
 if (x > 1) { 
 slide(x);
  }
  
}
function onSwipeEnd(e) {
  if (x > 35) { 
slide(100);
  }

  else {
  slide(0);

}
}
}, 5000);