js 实现 to do list

最新推荐文章于 2024-08-05 08:02:44 发布

原创最新推荐文章于 2024-08-05 08:02:44 发布 · 1.3k 阅读

7 ·

CC 4.0 BY-SA版权

javaScript 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的简易待办事项列表应用。通过简单的输入框和按钮，用户可以添加任务到列表中，并能通过点击删除按钮移除已完成的任务。文章详细展示了如何用JavaScript动态操作DOM元素，包括添加和删除列表项。

// js 实现 to do list
html结构如下：

<input type="text">
<button id="btn"> 添加</button>
<div id="content"></div>

js 代码如下

var arr=[];
var val=document.getElementsByTagName('input')[0];
var btn=document.getElementById('btn');  //添加 按钮
var content=document.getElementById('content');  //存放列表
btn.onclick=function () {  //添加事件
    arr.push(val.value);
    var str=''
    for(let i=0;i<arr.length;i++){
        str+=`<p>${arr[i]}   <button class="del">删除</button></p>`;   //模板字符串
    }
    val.value='';
    content.innerHTML=str;
    //删除，需要写在这，因为放在外层获取不到删除按钮
    var del=document.getElementsByClassName('del');
    for(let i=0;i<del.length;i++){
        del[i].onclick=function () {  //删除点击的这一行
          this.parentNode.parentNode.removeChild(this.parentNode);
          arr.splice(i,1)
        }
    }
}