Question

我有一个列表，其中包含每个元素的删除按钮，当用户点击删除按钮时会出现一个确认对话框，如果用户按下确定按钮我要删除列表元素我的问题是如何获取{{ 1}}列表元素索引为了从列表中删除它，我的代码没有返回正确的索引，请帮帮我..

<li>

Java脚本代码：

  <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>

Answer 1

您将错误绑定到拆分按钮，它应该如下：

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

Answer 2

这是我弹出窗口的方式：

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

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

2 个答案: