Question

我正在研究人们首次学习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();
}

Answer 1

创建动态内容的问题在于，当您添加元素时，该元素是裸露的，意味着没有任何事件侦听器。您在代码中添加到现有按钮的事件侦听器将不会传递到新按钮，您需要再次绑定新按钮。更一般而言，事件侦听器绑定到特定元素，而不绑定到按钮之类的一般概念。您的解决方案非常简单，只需在元素创建后再次运行绑定即可。希望我能帮忙

添加新元素时添加功能按钮

1 个答案: