jQuery点击删除按钮，删除当前div

最新推荐文章于 2022-03-31 17:35:01 发布

「已注销」

最新推荐文章于 2022-03-31 17:35:01 发布

阅读量3.2k

点赞数 2

分类专栏：前端

前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种在多个div行中实现精确删除指定行的方法，通过使用jQuery的事件委托，确保仅移除被点击的删除按钮所在的div行，避免误删其他元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在有多行div，共用一个删除事件，点击删除的时候，会把页面所有的div全部删掉，但我只需要点击哪一行div里面的删除按钮，就删除哪一行。

参考代码如下：

<!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>