jquery点击删除按钮,删除当前的div

简介: jquery点击删除按钮,删除当前的div

现在有多行div,共用一个删除事件,点击删除的时候,会把页面所有的div全都删掉了,但是我只需要点击哪一行div里面的删除按钮,就删除哪一行,其实很简单,只需要写一个this事件即可。


参考代码如下:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <style>
            .editfence {
                margin-left: 60px;
            }
        </style>
    </head>
    <body>
        <div class="col-md-3 col-sm-6 col-sm-12">
            <div id="stoparea">
                <div style="margin-bottom: 5px;">
                    <img src="images/fence/fence2.png" /> <span>滞留区域1</span>
                    <span class="editfence">修改</span> <span class="editdelete">删除</span>
                </div>
                <div style="margin-bottom: 5px;">
                    <img src="images/fence/fence2.png" /> <span>滞留区域2</span>
                    <span class="editfence">修改</span> <span class="editdelete">删除</span>
                </div>
                <div style="margin-bottom: 5px;">
                    <img src="images/fence/fence2.png" /> <span>滞留区域3</span>
                    <span class="editfence">修改</span> <span class="editdelete">删除</span>
                </div>
            </div>
        </div>
        <script>
            // 删除按钮事件
            $(".editdelete").on("click", function() {
                $(this).parent().remove();
            })
        </script>
    </body>
</html>
相关文章
|
7月前
|
JavaScript
jQuery遍历div,判断是否为空,为空时执行某个操作
jQuery遍历div,判断是否为空,为空时执行某个操作
|
7月前
|
JavaScript
用JQuery实现选中select里面的option显示对应的div
用JQuery实现选中select里面的option显示对应的div
|
6天前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
40 21
|
11天前
|
JavaScript 前端开发 iOS开发
ios样式开关按钮jQuery插件
ios样式开关按钮jQuery插件
36 7
|
4月前
|
JavaScript Java
点击按钮,向下添加目录。Java script+jQuery写法
点击按钮,向下添加目录。Java script+jQuery写法
28 1
|
4月前
|
JavaScript Java
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
23 1
|
7月前
|
JavaScript 前端开发
【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
【5月更文挑战第2天】【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
|
7月前
|
JavaScript
jquery实现单击div切换背景,再次单击回到原来样式
jquery实现单击div切换背景,再次单击回到原来样式
|
7月前
|
JavaScript 前端开发
原生js与jQuery显示隐藏div的几种方法
原生js与jQuery显示隐藏div的几种方法
102 0
|
JavaScript 前端开发
jQuery点击图片来回切换功能
jQuery点击图片来回切换功能
104 0
jQuery点击图片来回切换功能