Question

我知道如何在分组按钮单击中从列表视图中删除列表项，如下所示： 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

Answer 2

一种方法可能是向显示删除图标的anchor添加点击事件。并将当前li存储在变量中。

使用相同的变量删除li ..

 var button = document.getElementById("delButton");
 button.onclick = deleItem;

 var $currli;

 $('a[data-rel=popup]').on('click', function(e) {
     e.preventDefault();
    $currli = $(this).closest('li');
 });

 function deleItem() {
     console.log($currli)
     $currli.remove();
     $( "#sterge" ).popup( "close" );
 }

检查小提琴

<强>更新

在deleItem方法中调用$( "#sterge" ).popup( "close" );

<强> Updated Fiddle

通过弹出窗口中的splitbutton单击从列表视图中删除li

2 个答案: