JQuery点击按钮删除当前的div

最新推荐文章于 2022-10-12 15:20:06 发布

原创最新推荐文章于 2022-10-12 15:20:06 发布 · 1.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #前端 #javascript

jquery 专栏收录该内容

2 篇文章

订阅专栏

这篇博客展示了如何在HTML中创建一个包含图片和文本的布局，并通过JavaScript实现删除功能。当用户点击带有‘编辑删除’类的按钮时，会触发删除事件，移除相应的盒子元素。该示例涉及前端开发中的DOM操作和事件监听。

1.图片

2.html部分


            <div >
                <div >
                    <img src="images/home.png" /> <span>我是盒子1</span>
                     <span class="editdelete">删除</span>
                </div>
                <div >
                    <img src="images/car.png" /> <span>我是盒子2</span>
                     <span class="editdelete">删除</span>
                </div>
                <div >
                    <img src="images/index.png" /> <span>我是盒子3</span>
                     <span class="editdelete">删除</span>
                </div>
            </div>

3.JS部分

<script>
    // 删除按钮事件
    //使用全局方法定义点击事件
    $(".editdelete").on("click", function() {
        //删除当前所在的盒子
        $(this).parent().remove();
    })
</script>