动态删除li标签

通过li中的button删除该条记录

<ul class="mui-table-view list-ul ">
                     <li class="mui-table-view-cell mui-media list-li">
                        <img  class="classPic" src="img/1.jpg" />
                        <div class="content">
                          <div class="classname"><a href="javascript:;">永不上线</a>:</div>
                           <div class="msgInfo">1增加了记录广播时间的功能。</div>
                                <div class="times"><span>07月05日 15:14</span>
                                 <button type="button" class="bt-remove mui-btn mui-btn-red mui-btn-outlined">删除</button>
                                 </div>
                        </div>
                     </li>

               <li class="mui-table-view-cell mui-media list-li">
                      同上
                     </li>

                      <li class="mui-table-view-cell mui-media list-li">
                       ..
                     </li> 
                     <li class="mui-table-view-cell mui-media list-li">
                        ..
                     </li>
                 </ul>

页面结果如下：

目标：
想通过<button>删除一个<li>，弹出对话框询问是否确认删除。确认删除后删除在前台删除
思考：
Jquery中remove（）方法可以删除
实现过程
html部分：（增加一个对话框）

 <div class="mask"></div>
                    <div class="dialog">
                        <div class="title">
                    <img alt="点击可以关闭" src="../images/delete.gif"> 删除时提示</div>
                        <div class="del-content">
                            <img alt="" src="../images/delete.gif">
                            <span>你真的要删除这条记录吗？</span>
                       </div>
                        <div class="bottom">
                            <input type="button" id="ok" value="确定" class="btn">
                            <input type="button" id="noOk" value="取消" class="btn">
                        </div>
                    </div>

jQuery部分：

$(function(){ 
var index;//记录li的index值
//绑定删除按钮的触发事件 
$(".bt-remove").click(function(){ 
 index=$(this).parents(".list-li").index();//此处自己试了很多遍，对父类选择不熟
showmask();
$(".mask").show();
showDialog();  
$(".dialog").show(); 

}); 

function showmask(){
    var objw=$(window);
    var objc=$(".mask");
    var brsw=objw.width(); 
    var brsh=objw.height(); 
    objc.css({"width":brsw});
    objc.css({"height":brsh});
    objc.css("opacity","0.3");
}
/*
* 根据当前页面于滚动条的位置，设置提示对话框的TOP和left 
*/ 
function showDialog(){ 
var objw=$(window);//当前窗口 
var objc=$(".dialog");//当前对话框 
var brsw=objw.width(); 
var brsh=objw.height(); 
var sclL=objw.scrollLeft(); 
var sclT=objw.scrollTop(); 
var curw=objc.width(); 
var curh=objc.height(); 
//计算对话框居中时的左边距 
var left=sclL+(brsw -curw)/2; 
var top=((brsh-curh)/3);
objc.css({"left":left,"top":top}); 
/*objc.css({"left":left});
objc.css({"margin-top":top});*/
} 

//当页面窗口大小改变时触发的事件 
$(window).resize(function(){ 

if(!$(".dialog").is(":visible")){ 
return; 
} 
showmask();
showDialog(); 
}); 

//注册关闭图片单击事件 
$(".title img").click(function(){ 

$(".dialog").hide(); 
$(".mask").hide(); 

}); 
//取消按钮事件 
$("#noOk").click(function(){ 
$(".dialog").hide(); 
$(".mask").hide(); 
}); 

//确定按钮事假 
$("#ok").click(function(){ 
$(".dialog").hide(); 
$(".mask").hide(); 
$(".list-li").eq(index).remove();//利用remove（）删除li

} 
}); 
});

结果展示：

删除前

删除后
文件链接：
动态删除li标签