时间戳

首页 > 解决方案 > 在 javascript 中创建删除按钮以删除购物清单项目

javascript - 在 javascript 中创建删除按钮以删除购物清单项目

问题描述

我自己尝试过这样做，甚至阅读了其他人对此练习的解决方案，但我就是不明白。我需要有人给我关于如何使删除按钮起作用的建议。这是我到目前为止所做的

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");
var buttonDlt = document.querySelectorAll("delete");

function inputLength() {
    return input.value.length;
}

function createListElement() {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input.value));
    ul.appendChild(li);
    input.value = "";
}

function addListAfterClick() {
    if (inputLength() > 0) {
        createListElement();
    }
}

function addListAfterKeypress(event) {
    if (inputLength() > 0 && event.keyCode === 13) {
        createListElement();
    }
}

function deleteAfterClick() {
    li.remove(button.addEventListener("click"));

}

button.addEventListener("click", addListAfterClick);
buttonDlt.addEventListener("click", deleteAfterClick);
input.addEventListener("keypress", addListAfterKeypress);
<!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 class="bold red" random="23">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>

我添加了事件监听器，声明了所有涉及的变量和元素。我无法弄清楚我错过了什么......

标签： javascriptdom

解决方案

你有: var buttonDlt = document.querySelectorAll("delete");，它返回一个节点列表（匹配元素的集合）。集合没有.addEventListener()方法，所以这一行：

buttonDlt.addEventListener("click", deleteAfterClick);

失败，因此当您单击删除按钮时没有任何反应。

您需要做的是遍历集合中的所有项目并将它们中的每一个绑定到删除事件处理程序，或者您可以在更高级别处理事件，然后确定哪个元素触发了事件并采取相应措施。这种方法称为“事件委托”，可以减少代码（没有循环遍历集合并为每个项目注册事件处理程序）和更好的性能（而不是许多事件注册，只有一个）。此外，当应该具有事件绑定的新元素被动态添加到文档时，这种方法是首选的，就像您在此处创建新的购物清单项目一样，因为这些新项目不必使用显式事件处理程序进行设置。

此外，您删除项目的代码：

li.remove(button.addEventListener("click"));

是不正确的。

请参阅下面的内联评论：

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");


function inputLength() {
    return input.value.length;
}

function createListElement() {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input.value));
    
    // Create a delete button and configure it:
    var btnDelete = document.createElement("button");
    btnDelete.classList.add("delete");
    btnDelete.textContent = "Delete";
    
    // Append the button to the list item
    li.appendChild(btnDelete);
    ul.appendChild(li);
    input.value = "";
}

function addListAfterClick() {
    if (inputLength() > 0) {
        createListElement();
    }
}

function addListAfterKeypress(event) {
    if (inputLength() > 0 && event.keyCode === 13) {
        createListElement();
    }
}

function deleteAfterClick(event) {
  // Determine if it was a delete button that was clicked
  if(event.target.classList.contains("delete")){
    // Remove the closest li ancestor to the clicked element
    event.target.closest("li").remove();
  }

}

button.addEventListener("click", addListAfterClick);

// keypress is deprecated, use keydown instead
input.addEventListener("keydown", addListAfterKeypress);

// Handle all the clicks that originate from within the <ul> at
// the <ul> level when they bubble up to it instead of setting each
// button within the <ul> up with its own click event handler.
ul.addEventListener("click", deleteAfterClick);
<!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 class="bold red" random="23">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>
</body>
</html>

推荐阅读