JQuery点击按钮删除当前的div

by__csdn

于 2021-09-02 16:14:46 发布

阅读量1.6k

点赞数 1

分类专栏： jquery 文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/by__csdn/article/details/120063666

版权

jquery 专栏收录该内容

2 篇文章

订阅专栏

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

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

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>