我正在研究人们第一次学习JavaScript时遇到的经典购物清单问题。因此，我可以将新元素添加到列表中，但是当我尝试使用Delete按钮删除这些元素时，这些元素将不会被删除。
切换按钮也不起作用。有人可以帮忙吗？
这是我的代码：
<!DOCTYPE html>
<html>
<head>
<title>Javascript + DOM</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Shopping List</h1>
<p id="first">Get it done today</p>
<input id="userinput" type="text" placeholder="enter items">
<button id="enter">Enter</button>
<ul>
<li> Notebook <button class="Delete">Delete!</button></li>
<li>Jello <button class="Delete">Delete!</button></li>
<li>Spinach <button class="Delete">Delete!</button></li>
<li>Rice <button class="Delete"> Delete!</button></li>
<li>Birthday Cake <button class="Delete"> Delete!</button></li>
<li>Candles <button class="Delete"> Delete!</button></li>
</ul>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
这里是JavaScript，我无法弄清楚是什么问题：
var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");
var li = document.querySelectorAll("li");
var deleteButtons = document.getElementsByClassName("Delete");
function inputLength() {
return input.value.length;
}
function createListElement() {
var li = document.createElement("li");
li.appendChild(document.createTextNode(input.value));
ul.appendChild(li);
var button = document.createElement("button");
button.appendChild(document.createTextNode("Delete!"));
button.classList.add("Delete")
li.appendChild(button);
}
function addListAfterClick() {
if (inputLength() > 0) {
createListElement();
}
}
function addListAfterKeypress(event) {
if (inputLength() > 0 && event.keyCode === 13) {
createListElement();
}
}
button.addEventListener("click", addListAfterClick);
input.addEventListener("keypress", addListAfterKeypress);
for(var i=0; i<li.length; i++){
li[i].addEventListener("click", liClick);
}
function liClick(){
this.classList.toggle("done");
}
input.value = "";
for(var i=0; i<li.length; i++){
li[i].addEventListener("click", liClick);
}
function liClick(){
this.classList.toggle("done");
}
for (var i = 0; i < deleteButtons.length; i ++){
deleteButtons[i].addEventListener("click", deleteItem)
}
function deleteItem(){
this.parentElement.remove();
}
创建动态内容的问题是，当您添加元素时，该元素是裸露的，意味着没有任何事件侦听器。您在代码中添加到existing按钮的事件侦听器将不会传递给新按钮，您需要再次绑定新按钮。更一般而言，事件侦听器绑定到特定元素，而不绑定到按钮之类的一般概念。您的解决方案非常简单，只需在元素创建后再次运行绑定即可。希望我有所帮助