我已经尝试自己完成此操作,甚至阅读了其他人对此练习的解决方案,但我只是不明白。我需要有人给我一些有关如何使删除按钮起作用的建议。这是我到目前为止所做的
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>
我已经添加了事件监听器,声明了所有涉及的变量和元素。我无法弄清我所缺少的...
您具有:var buttonDlt = document.querySelectorAll("delete");
,它返回节点列表(匹配元素的集合)。集合没有.addEventListener()
方法,因此此行:
buttonDlt.addEventListener("click", deleteAfterClick);
失败,因此,当您单击删除按钮时,没有任何反应。
您需要做的是遍历集合中的所有项目,并将每个项目绑定到删除事件处理程序,或者您可以在更高级别上处理事件,然后确定触发该事件的元素并采取相应的措施。这种方法称为"event delegation",它可以减少代码(没有循环收集和将事件处理程序注册到每个项目)和更好的性能(而不是许多事件注册,只有一个)。另外,当您应该像在此处创建新的购物清单项目一样在此处将具有事件绑定的新元素动态添加到文档中时,这种方法是首选的,因为这些新项目不必使用显式事件处理程序进行设置。] >
另外,您要删除项目的代码:
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>