js实现列表删除

最新推荐文章于 2024-03-07 21:21:56 发布

小苏(º﹃º )

最新推荐文章于 2024-03-07 21:21:56 发布

阅读量3.9k

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_45850095/article/details/115648053

版权

利用js实现列表删除

题目如下：

在这里插入图片描述

功能如下：
当点击清空时，所有项目全部清空，当点击删除时，对应项目跟着一起删除

实现步骤：

1.首先我们要创建出对应的列表和删除按钮
2.我们要给每个按钮绑定事件
3.通过点击按钮来删除对应的列表或清空列表
4.利用for循环来减少代码量

方法一：

利用this（当前对象）寻找父元素或兄弟元素来删除对应节点：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body> 
    <div class="container">
        <p>
            <button class="12">清空</button>
            <ul class="list">
                <li>项目1<button>删除</button></li>
                <li>项目2<button>删除</button></li>
                <li>项目3<button>删除</button></li>
                <li>项目4<button>删除</button></li>
                <li>项目5<button>删除</button></li>
                <li>项目6<button>删除</button></li>
                <li>项目7<button>删除</button></li>
                <li>项目8<button>删除</button></li>
                <li>项目9<button>删除</button></li>
            </ul>
        </p>
    </div>
</body>
<script>
    //获取所有按钮
    var buttons=document.querySelectorAll("button");
    buttons[0

最低0.47元/天解锁文章

小苏(º﹃º )

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
js实现列表删除

利用js实现列表删除题目如下：实现步骤：方法一：方法二：方法三：方法四：题目如下：功能如下：当点击清空时，所有项目全部清空，当点击删除时，对应项目跟着一起删除实现步骤： 1.首先我们要创建出对应的列表和删除按钮 2.我们要给每个按钮绑定事件 3.通过点击按钮来删除对应的列表或清空列表 4.利用for循环来减少代码量方法一：利用this（当前对象）寻找父元素或兄弟元素来删除对应节点：<!DOCTYPE html><html lang="en">
复制链接

扫一扫