jq实现左滑显示删除按钮，点击删除实现删除数据

最新推荐文章于 2021-06-27 00:52:59 发布

原创

最新推荐文章于 2021-06-27 00:52:59 发布 · 5.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html #class #jquery

该博客详细介绍了如何利用jQuery实现一个左滑显示删除按钮的功能，包括HTML布局、CSS样式设置和jQuery代码实现。通过这个教程，读者可以学会在自己的项目中添加类似的数据删除交互效果。

效果图

这里写图片描述

第一步：加载

<script src="js/jquery.min.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>

第二步：html

        <div class="item-wrap">
    <div class="item clearfix">
        <div class="img-item">
            <img src="images/icon.png">
        </div>
        <div class="txt-item">
            <p class="name">
                 小黄人
            </p>
            <p class="txt">
                小黄人小黄人小黄人小黄人
            </p>
        </div>
        <i class="arrow"></i>
        <a class="delect-btn">删除</a>
    </div>
    <div class="item  clearfix">
        <div class="img-item">
            <