jquery - 使用弹出窗口单击 splitbutton 从 ListView 中删除一个 li

Question

我知道如何在单击拆分按钮时从 ListView 中删除列表项，如您所见: jsfiddle

代码:

$('#produsele').children('li').on('click', function () {
    var selected_index = $(this).index();
    $(this).closest('li').remove()
    //alert('Selected Index = ' + selected_index);
});

但我希望能够在弹出窗口询问您是否确定要删除它之后执行此操作，例如 jsfiddle

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 href="#sterge" data-rel="popup" data-position-to="window" data-transition="pop">Delete</a>

        </li>
        <li><a href="#">
                        <img src="images/pic2.jpg" />
                        <h2>Second product</h2>
                        <p>other description</p></a>
    <a href="#sterge" data-rel="popup" data-position-to="window" data-transition="pop">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>

你能帮帮我吗？我如何引用 <li>从主页，从弹出窗口内？

Answer 1

像这样的东西应该可以工作

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");
});

EXAMPLE