删除从确认弹出列表中的元素

Question

我有一个列表与删除按钮为每个元素，当用户点击删除按钮时出现确认对话框，如果用户按下确定按钮我想删除列表元素我的问题是如何获得<li>列表元素的索引，以便从列表中删除，我的代码不会返回正确的索引，请帮助我..

<div data-role="page"> 
    <div data-role="content"> 

    <ul data-role="listview" id="employeesList" data-inset="true" data-split-  icon="delete"> 

    <li><a href="#"> 
    <font class="line1" > Emp1Name</font> 
    <font class="line2" >Emp1Salary</font> 
    </a><a href="#DeleteConfirm" data-rel="popup" data-position-to="window" data-     transition="pop" >Delete</a></li> 

    <li><a href="#"> 
    <font class="line1" > Emp2Name</font> 
    <font class="line2" >Emp2Salary</font> 
    </a><a href="#DeleteConfirm" data-rel="popup" data-position-to="window" data-      transition="pop">Delete</a></li> 
    </ul> 

    <div data-role="popup" id="DeleteConfirm" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="width:400px;height:200px;" class="ui-corner-all"> 

    <div data-theme="c" style="text-align:center;float:center;height:53px;padding-top:13px;" > 
    <font size="6px" >Delete</font> 
    </div> 
    <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content"> 
    <font size="5px" >Do you want to delete this Employee?</font> 
    <BR> 
    <div style="text-align:center;font-size: 22px;" > 
    <input type="button" id="No" data-inline="true" data-icon="delete" data-theme="c" value="No " /> 
    <input type="button" id="Yes"data-inline="true" data-icon="check" data- theme="c" value=" Yes" data-corners="false"/> 
</div> 

    </div> 
    </div> 
</div> 

的Java脚本代码：

var SelectedLi ; 
    $('#DeleteConfirm').on('click',function(){ 

     SelectedLi= $(this).parent().index(); 
    }); 

    $('#Yes').on('click',function(){ 

     $('#employeesList').remove(SelectedLi); 
     $('#DeleteConfirm').popup('close'); 
    }); 


    $('#No').on('click' ,function(){ 

     $('#DeleteConfirm').popup('close'); 
    }); 

Answer 1

这是我做我的弹出：

HTML：

<div data-role="popup" id="sterge" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:400px;" class="ui-corner-all"> 
     <div data-role="header" data-theme="b" class="ui-corner-top"> 
       <h1>Delete?</h1> 
      </div> 
     <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content"> 
       <h3 class="ui-title">To Delete Product from Bonus?</h3> 
       <p>This action cannot be undone.</p> 
       <input id="giveupButton" data-inline="true" type="button" value="Cancel"/> 
       <input id="delButton" data-inline="true" onclick="deletebonusproduct();" data-theme="b" type="button" value="Delete"/> 
      </div> 
     </div> 

个

JS：

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

Answer 2

你有错误的结合事件劈扣，它应该是如下：

var SelectedLi ='' ; 

$('[href=#DeleteConfirm]').on('click',function (e) { 
    // store parent of clicked button 
    SelectedLi = $(this).closest("li"); 
}); 

$('#Yes').on('click',function(){ 
    $(SelectedLi).remove(); 
    $('#employeesList').listview("refresh"); 
    $('#DeleteConfirm').popup('close'); 
}); 


$('#No').on('click' ,function(){ 
    $('#DeleteConfirm').popup('close'); 
}); 

Demo