Mar
28
2020
jQuery删除一个元素后淡出效果展示删除过程的方法
作者:
绝缘体.. 发布:
2020-03-28 17:34 分类:
未分类 阅读:
抢沙发
jQuery删除一个元素后淡出效果展示删除过程的方法,html结构如下:
<li>
<div class="qiniuImgIcon">
<a rel="lightbox" href="#">
<img src="images/image_icon.png">
</a>
</div>
<div class="fileName"><p>5b84ed08a13f7.jpg</p></div>
<div class="fileSize"><p>2.3 MB</p></div>
<div class="filePutTime"><p>2020-03-23 18:21:25</p></div>
<div class="operateAct">
<p>
<span class="replaceBtn" file_name="5b84ed08a13f7.jpg">替换</span>
<span key="5b84ed08a13f7.jpg" class="deleteBtn">删除</span>
<span class="copyBtn" url="#">外链</span>
</p>
</div>
</li>
点击删除二字移除整个li元素,代码示例:
$('.deleteBtn').click(function () {
if (confirm('您确定要删除吗?')) {
$this = $(this);
$.ajax({
type: 'post',
cache: false,
url: '',
data: 'action=deleteFile&key=' + $this.attr('key'),
success: function (data) {
if (!data.errcode) {//删除成功
//最直接的方法,直接移除元素
//$this.parent().parent().parent().remove();
//特效
$this.parent().parent().parent().fadeTo("slow", 0.01, function () {//fade
$(this).slideUp("slow", function () {//slide up
$(this).remove();//then remove from the DOM
});
});
return false;
}
//删除失败
alert(data.message);
}
});
}
});
微信扫一扫,打赏作者吧~