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>
                        
                        <a class='move'>item 1</a>
                    </li>
                    <li>

                        <a class='move'>item 2</a>
                    </li>
                    <li>

                        <a class='move'>item 3</a>
                    </li>
                    <li>

                        <a class='move'>item 4</a>
                    </li>
                    <li>

                        <a class='move'>item 5</a>
                    </li>
                    <li>

                        <a class='move'>item 6</a>
                    </li>
                    <li>

                        <a class='move'>item 7</a>
                    </li>
                    <li>

                        <a class='move'>item 8</a>
                    </li>
                    <li>

                        <a class='move'>item 9</a>
                    </li>
                    <li>

                        <a class='move'>item 10</a>
                    </li>
                    <li>
                      
                        <a class='move'>item 11</a>
                    </li>
                    <li>

                        <a class='move'>item 12</a>
                    </li>
                    <li>

                        <a class='move'>item 13</a>
                    </li>
                    <li>

                        <a class='move'>item 14</a>
                    </li>
                    <li>

                        <a class='move'>item 15</a>
                    </li>
                                        <li>

                        <a class='move'>item 1</a>
                    </li>
                    <li>

                        <a...

JavaScript

var startPos;
var handlingTouch = false;
var itemis;
setTimeout(function() {
var itemwidth = $(window).width();
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;
  slide(x);
}
function onSwipeEnd(e) {

  if (x > 35) { 
slide(itemwidth);
setTimeout(function() {
$(itemis).slideUp("fast").remove()
}, 500);

  }
  else {
  slide(0);

}
}
}, 5000);