现在有多行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>