核心思路
//1 我们把文本域的值 赋值给li的时候 多添加 一个删除链接 //2 我们把所有的链接获取到 点击删除链接的时候 删除当前链接所在的li
//3 阻止链接跳转需要添加 javascript:void(0); 或者 javascript:;
代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>to do list</title> <style> * { margin: 0; padding: 0; } body { padding: 100px; } textarea { 200px; height: 100px; border: 1px solid pink; outline: none; resize: none; } ul { margin-top: 50px; } li { 300px; padding: 5px; background-color: rgb(245, 209, 243); color: red; font-size: 14px; margin: 15px 0; } li a { float: right; } </style> </head> <body> <textarea name="" id=""></textarea> <button>按钮</button> <ul> </ul> <script> var btn = document.querySelector('button'); var text = document.querySelector('textarea'); var ul = document.querySelector('ul'); //给btn添加点击事件 btn.onclick = function () { if (text.value == '') { alert('请输入内容'); return false; } else { //1 创建元素 var li = document.createElement('li'); //2 把用户输入的内容 赋值给 li li.innerHTML = text.value + "<a href = 'javascript:;'>删除</a>"; //3 添加入元素 ul.insertBefore(li,ul.children[0]); } //删除操作 [ 删除的是当前链接的li 父级] var as = document.querySelectorAll('a'); for (var i = 0; i < as.length; i++) { //给删除链接添加删除事件 as[i].onclick = function () { //node.removeNode(child) 删除的是当前a所在的li this.parentNode ul.removeChild(this.parentNode); //删除ul里面的li 删除当前点击的父级 } } } </script> </body> </html>