实习生慕慕想要实现一个功能，要求是：页面上有一个记录待办事项的列表，在输入框中输入内容之后，点击添加按钮，可以将输入的内容添加到列表里。如果事情完成了，点击此项可以从列表里移除，效果如下：
演示视频
作业描述
1、慕慕写的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<input type="text" class="textInput">
<button id="btn">添加</button>
<ul class="list">
<li class="li">吃饭</li>
<li class="li">睡觉</li>
<li class="li">打豆豆</li>
</ul>
<script>
// 获取元素
var textInput = document.querySelector(".textInput")
var btn = document.querySelector("#btn")
var list = document.querySelector(".list")
var li = document.querySelectorAll(".li")
// 给按钮绑定点击事件
btn.onclick = function () {
var li = document.createElement("li")
li.className = "li"
li.innerHTML = textInput.value;
list.appendChild(li)
textInput.value = ""
}
// 给li绑定点击事件
for (var i = 0; i < li.length; i++) {
li[i].onclick = function () {
list.removeChild(this)
}
}
</script>
</body>
</html>
2、慕慕遇到的问题：发现新添加的列表项没有点击移除的功能，需要使用什么方法才能完成这个效果呢？你可以给慕慕出出主意吗？说一下你们提供的方法都有哪些需要注意的地方。