mui h5 动态实现数据的移除和数据操作完后的重新获取

ＨＴＭＬ　代码

<ul class="mui-table-view" id="OA_task_1">
<li class="mui-table-view-cell">
<div class="mui-slider-right mui-disabled">
<a class="mui-btn mui-btn-bule">企业联系人</a>
<a class="mui-btn mui-btn-red">移除</a>
</div>
<div class="mui-slider-handle"><img class="mui-media-object mui-pull-left radius" src="images/img42.png">
<div class="mui-media-body">
<div class="mui-pull-left mui-ellipsis pl-name">萌萌哒天团萌萌哒天团萌萌哒天团萌萌哒天团</div>
<p class="mui-pull-left pl-bule">企业联系人</p>
</div>
<div class="mui-media-body">
<p class="mui-pull-left">2016年1月5日</p>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-slider-right mui-disabled">
<a class="mui-btn mui-btn-col">企业联系人</a>
<a class="mui-btn mui-btn-red">移除</a>
</div>
<div class="mui-slider-handle"><img class="mui-media-object mui-pull-left radius" src="images/imgPPT.png">
<div class="mui-media-body">
<div class="mui-pull-left mui-ellipsis pl-name">T-ARA</div>
</div>
<div class="mui-media-body">
<p class="mui-pull-left">2016年1月5日</p>
</div>
</div>
</li>
</ul>

 

js代码

//添加企业联系人
(function($) {
$('#OA_task_1').on('tap', '.mui-btn-col', function(event) {
var elem = this;
var id = this.getAttribute('id');
var li = elem.parentNode.parentNode;
elem.class = 'mui-btn mui-btn-bule';
mui.confirm('确定添加该员工为企业联系人?', '提示', btnArray, function(e) {
if (e.index == 0) {
var ajaxUrl=getajaxUrl();
var url = ajaxUrl[0]['nativeIp']+"/mobile/labour/iscontacts";
mui.ajax(url,{
data:{
id:id,
type:"1"
},
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
success:function(data){
var result = eval(data);
result = eval(result);
if(result[0]['isok']){
$.swipeoutClose(li);
var divp="<p class='mui-pull-left pl-bule'>企业联系人</p>"
var contact = "<a id="+result[0].newlabour.id+" class='mui-btn mui-btn-bule'>企业联系人</a>"
li.innerHTML = '<div class="mui-slider-right mui-disabled" id="">'+contact+'<a id="'+result[0].newlabour.id+'" class="mui-btn mui-btn-red">移除</a></div><div class="mui-slider-handle"><img class="mui-media-object mui-pull-left radius" src="/'+result[0].user.headimg+'"><div class="mui-media-body"><div class="mui-pull-left mui-ellipsis pl-name">'+result[0].user.nickname+'</div>'+divp+'</div><div class="mui-media-body"><p class="mui-pull-left">'+result[0].newlabour.updatetime+'</p></div></div>'
mui.toast('该员工已成为企业联系人！');

}
},
error:function(xhr,type,errorThrown){
//异常处理；
console.log(type);
}
});
}
else {
setTimeout(function() {
$.swipeoutClose(li);
}, 0);
}
});
});
var btnArray = ['确定', '取消'];
})(mui);
//移除企业联系人
(function($) {
$('#OA_task_1').on('tap', '.mui-btn-bule', function(event) {
var user = JSON.parse(plus.storage.getItem("user"))
var elem = this;
var id = this.getAttribute('id');
var li = elem.parentNode.parentNode;
mui.confirm('确定取消该员工为企业联系人?', '提示', btnArray, function(e) {
if (e.index == 0) {
var ajaxUrl=getajaxUrl();
var url = ajaxUrl[0]['nativeIp']+"/mobile/labour/iscontacts";
mui.ajax(url,{
data:{
id:id,
type:"0"
},
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
success:function(data){
var result = eval(data);
result = eval(result);
if(result[0]['isok']){
$.swipeoutClose(li);
var divp=""
var contact = "<a id="+result[0].newlabour.id+" class='mui-btn mui-btn-col'>企业联系人</a>"
li.innerHTML = '<div class="mui-slider-right mui-disabled" id="">'+contact+'<a id="'+result[0].newlabour.id+'" class="mui-btn mui-btn-red">移除</a></div><div class="mui-slider-handle"><img class="mui-media-object mui-pull-left radius" src="/'+result[0].user.headimg+'"><div class="mui-media-body"><div class="mui-pull-left mui-ellipsis pl-name">'+result[0].user.nickname+'</div>'+divp+'</div><div class="mui-media-body"><p class="mui-pull-left">'+result[0].newlabour.updatetime+'</p></div></div>'
mui.toast('成功移除企业联系人！');
}
},
error:function(xhr,type,errorThrown){
//异常处理；
console.log(type);
}
});
}
else {
setTimeout(function() {
$.swipeoutClose(li);
}, 0);
}
});
});
var btnArray = ['确定', '取消'];
})(mui);

实现效果