JSFiddle - React, Tailwind, and code Playground

HTML

<div data-role="page" id="produsele">
    <ul id="listaprod" data-role="listview" data-split-icon="delete" data-split-theme="d" data-inset="true">
        <li><a href="#">
						<img src="images/pic1.jpg" />
						<h2>First product</h2>
						<p>description</p></a>
	<a class="del" href="#">Delete</a>

        </li>
        <li id="listaprod2"><a href="#">
						<img src="images/pic2.jpg" />
						<h2>Second product</h2>
						<p>other description</p></a>
<a class="del" href="#">Delete</a>

        </li>
    </ul>

    <div data-role="popup" id="sterge" data-theme="d" data-overlay-theme="b" class="ui-content" style="max-width:340px; padding-bottom:2em;">
        	<h3>Delete product?</h3>
        <p>Do you want to remove this product from the list?</p>
        <input id="delButton" data-inline="true" data-mini="true" data-icon="check" type="button" value="Delete!" />
        <input id="giveupButton" data-inline="true" data-mini="true" data-icon="delete" type="button" value="No" />
    </div>
    
</div>

JavaScript

var li = '';
$(document.body).on('click', '.del' ,function(){
    li = $(this).parent();
    $('#sterge').popup("open");
});

$(document.body).on('click', '#delButton' ,function(){
    $('#sterge').popup("close");
    li.remove();
});

$(document.body).on('click', '#giveupButton' ,function(){
    $('#sterge').popup("close");
});