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;
        slide(x);
    }

    function onSwipeEnd(e) {

        if (x > 35) {
            slide(100);
        } else {
            slide(0);

        }
    }
}, 5000);