JSFiddle - React, Tailwind, and code Playground

HTML

<div data-role="page" id="splitlist">
    <div data-role="content"> <a href="#" id="showdelete" data-role="button">show</a>
 <a href="#" id="hidedelete" data-role="button">hide</a>

        <ul data-role="listview" data-split-icon="gear" data-split-theme="d" data-inset="true">
            <li> <a href="#">description</a>
 <a href="#" class="delete">delete</a>

            </li>
            <li> <a href="#">description</a>
 <a href="#" class="delete">delete</a>

            </li>
            <li> <a href="#">description</a>
 <a href="#" class="delete">delete</a>

            </li>
        </ul>
        <div></div>

JavaScript

$(document).on('pageshow', '#splitlist', function () {
    //hiding it on pageshow
    $('.delete').css('display', 'none');
});
$(document).on('pagecreate', '#splitlist', function () {
    $('.delete').css('display', 'none');
    $('#showdelete').bind('click', function () {
        $('.delete').css('display', 'compact');

    });
    $('#hidedelete').bind('click', function () {
        $('.delete').css('display', 'none');
    });

});