如何使用 javascript 将删除按钮添加到列表项？
[英]How can I add a delete button to a list items with javascript?
问题描述
For example when you type in a new item, you are able to add with either the enter key or clicking the enter button, but I want the new li item that is added to have a button right next to it that says delete, and I will be able to delete this new li item if I click that button.
例如，当您输入一个新项目时，您可以使用 enter 键或单击 enter 按钮添加，但我希望添加的新 li 项目旁边有一个按钮，表示删除，我如果我单击该按钮，将能够删除这个新的 li 项目。 I figured I would need to create element, and then I need to have a listener, but cannot figure out how to do this right.我想我需要创建元素，然后我需要一个监听器，但不知道如何正确地做到这一点。
[this is my codepen] https://codepen.io/otaylor3/pen/MWaeYPL [这是我的代码笔] https://codepen.io/otaylor3/pen/MWaeYPL
//variables for my shopping list var input = document.getElementById("userinput"); var button = document.getElementById("enter"); var ul = document.querySelector("ul"); var list = document.getElementsByTagName("li"); var trash = document.getElementsByClassName("delete"); var btndelete = document.getElementById("trash"); // const myUL = document.getElementById("bold"); //For removing items with delete button Array.prototype.slice.call(trash).forEach(function(item) { item.addEventListener("click", function(e) { e.target.parentNode.remove() }); }) //loop for to strikeout the list for(var i = 0; i < list.length; i++) { list[i].addEventListener("click", strikeout); } //toggle between classlist function strikeout () { this.classList.toggle("done"); } //check the length of the string entered function inputlength() { return input.value.length; } //collect data that is inserted function addli() { var li = document.createElement("li"); var btn = document.createElement("button"); li.appendChild(document.createTextNode(input.value)); ul.appendChild(li); input.value = ""; } //this will add a new list item after click function addListAfterClick () { if ( inputlength() > 0 ) { addli(); } } //this will add a new list item with keypress function addListKeyPress (event) { if (inputlength() > 0 && event.which === 13) { addli();} } //this will check for the event/keypress and create new list item input.addEventListener("keypress",addListKeyPress); //this will check for a click event and create new list item button.addEventListener("click", addListAfterClick);
body { background-image: url("easy.jpg"); }.coolTitle { text-align: center; font-family: 'Oswald', Helvetica, sans-serif; font-size: 80px; transform: skewY(-10deg); letter-spacing: 4px; word-spacing: -8px; color: tomato; text-shadow: -1px -1px 0 firebrick, -2px -2px 0 firebrick, -3px -3px 0 firebrick, -4px -4px 0 firebrick, -5px -5px 0 firebrick, -6px -6px 0 firebrick, -7px -7px 0 firebrick, -8px -8px 0 firebrick, -30px 20px 40px dimgrey }.done { text-decoration: line-through; }
<.DOCTYPE html> <html> <head> <title>Shopping List</title> <link rel="stylesheet" type="text/css" href="list.css"> </head> <body> <h1>Shopping List</h1> <h2 class="second"> Get it Done </h2> <input id= "userinput" type="text" placeholder="enter items"> <button id ="enter" >Enter</button> <ul id ="bold"> <li random ="24">Eggs <button class="delete">delete</button></li><br> <li>Milk <button class="delete">delete</button></li><br> <li>Cereal<button class="delete">delete</button></li><br> <li>Chicken <button class="delete">delete</button></li><br> <li>Oreos <button class="delete">delete</button></li><br> </ul> <script type="text/javascript" src="list.js"></script> </body> </html>
2 个解决方案
解决方案1
1 2020-04-18 21:42:58
You can add a event listener once to the ul and filter if the target is the delete button.如果目标是删除按钮，您可以向ul添加一次事件侦听器并进行过滤。 It is more efficient than adding multiple event listeners.它比添加多个事件监听器更有效。
https://dev.to/shimphillip/handing-javascript-events-efficiently-with-bubble-and-capture-4ha5 https://dev.to/shimphillip/handing-javascript-events-efficiently-with-bubble-and-capture-4ha5
ul.addEventListener("click", function(e) {
var target = e.target;
if (target.classList.contains("delete")) {
target.parentNode.remove();
}
});
//variables for my shopping list var input = document.getElementById("userinput"); var button = document.getElementById("enter"); var ul = document.querySelector("ul"); var list = document.getElementsByTagName("li"); var trash = document.getElementsByClassName("delete"); var btndelete = document.getElementById("trash"); // const myUL = document.getElementById("bold"); ul.addEventListener("click", function(e) { var target = e.target; if (target.classList.contains("delete")) { target.parentNode.remove(); } }); //toggle between classlist function strikeout() { this.classList.toggle("done"); } //check the length of the string entered function inputlength() { return input.value.length; } //collect data that is inserted function addli() { var li = document.createElement("li"); var btn = document.createElement("button"); li.appendChild(document.createTextNode(input.value)); ul.appendChild(li); input.value = ""; } //this will add a new list item after click function addListAfterClick() { if (inputlength() > 0) { addli(); } } //this will add a new list item with keypress function addListKeyPress(event) { if (inputlength() > 0 && event.which === 13) { addli(); } } //this will check for the event/keypress and create new list item input.addEventListener("keypress", addListKeyPress); //this will check for a click event and create new list item button.addEventListener("click", addListAfterClick);
body { background-image: url("easy.jpg"); }.coolTitle { text-align: center; font-family: 'Oswald', Helvetica, sans-serif; font-size: 80px; transform: skewY(-10deg); letter-spacing: 4px; word-spacing: -8px; color: tomato; text-shadow: -1px -1px 0 firebrick, -2px -2px 0 firebrick, -3px -3px 0 firebrick, -4px -4px 0 firebrick, -5px -5px 0 firebrick, -6px -6px 0 firebrick, -7px -7px 0 firebrick, -8px -8px 0 firebrick, -30px 20px 40px dimgrey }.done { text-decoration: line-through; } li { margin-top: 6px; }
<.DOCTYPE html> <html> <head> <title>Shopping List</title> <link rel="stylesheet" type="text/css" href="list.css"> </head> <body> <h1>Shopping List</h1> <h2 class="second"> Get it Done </h2> <input id="userinput" type="text" placeholder="enter items"> <button id="enter">Enter</button> <ul id="bold"> <li random="24">Eggs <button class="delete">delete</button></li> <li>Milk <button class="delete">delete</button></li> <li>Cereal<button class="delete">delete</button></li> <li>Chicken <button class="delete">delete</button></li> <li>Oreos <button class="delete">delete</button></li> </ul> <script type="text/javascript" src="list.js"></script> </body> </html>
解决方案2
0 已采纳 2020-04-18 22:18:35
Create the button element and add the event listener to it:创建按钮元素并向其添加事件侦听器：
//variables for my shopping list var input = document.getElementById("userinput"); var button = document.getElementById("enter"); var ul = document.querySelector("ul"); var list = document.getElementsByTagName("li"); var trash = document.getElementsByClassName("delete"); var btndelete = document.getElementById("trash"); // const myUL = document.getElementById("bold"); //For removing items with delete button Array.prototype.slice.call(trash).forEach(function(item) { item.addEventListener("click", function(e) { e.target.parentNode.remove() }); }) //loop for to strikeout the list for (var i = 0; i < list.length; i++) { list[i].addEventListener("click", strikeout); } //toggle between classlist function strikeout() { this.classList.toggle("done"); } //check the length of the string entered function inputlength() { return input.value.length; } //collect data that is inserted function addli() { var li = document.createElement("li"); var btn = document.createElement("button"); btn.className = "delete"; btn.innerHTML = "delete"; btn.addEventListener("click", function(e) { e.target.parentNode.remove(); }); li.addEventListener("click", strikeout); li.innerHTML = input.value + " "; li.appendChild(btn); ul.appendChild(li); input.value = ""; } //this will add a new list item after click function addListAfterClick() { if (inputlength() > 0) { addli(); } } //this will add a new list item with keypress function addListKeyPress(event) { if (inputlength() > 0 && event.which === 13) { addli(); } } //this will check for the event/keypress and create new list item input.addEventListener("keypress", addListKeyPress); //this will check for a click event and create new list item button.addEventListener("click", addListAfterClick);
.coolTitle { text-align: center; font-family: 'Oswald', Helvetica, sans-serif; font-size: 80px; transform: skewY(-10deg); letter-spacing: 4px; word-spacing: -8px; color: tomato; text-shadow: -1px -1px 0 firebrick, -2px -2px 0 firebrick, -3px -3px 0 firebrick, -4px -4px 0 firebrick, -5px -5px 0 firebrick, -6px -6px 0 firebrick, -7px -7px 0 firebrick, -8px -8px 0 firebrick, -30px 20px 40px dimgrey }.done { text-decoration: line-through; }
<h1>Shopping List</h1> <h2 class="second"> Get it Done </h2> <input id="userinput" type="text" placeholder="enter items"> <button id="enter">Enter</button> <ul id="bold"> <li random="24">Eggs <button class="delete">delete</button></li> <li>Milk <button class="delete">delete</button></li> <li>Cereal <button class="delete">delete</button></li> <li>Chicken <button class="delete">delete</button></li> <li>Oreos <button class="delete">delete</button></li> </ul>
I suggest using the click event of the ul instead of the multiple event handlers on the li elements.我建议使用ul的 click 事件而不是li元素上的多个事件处理程序。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何在列表中添加删除按钮？ - How can I add delete button on list?
如何使用“清除”按钮删除列表项？ (javascript) - How do I delete list items with “clear” button? (javascript)
如何通过单击从 JavaScript 的列表中删除项目？ - How can i delete items from a list in JavaScript by clicking?
如何为使用 javascript 添加的每个列表项添加删除按钮？ - How can I add a delete button for every list item added with javascript?
如何清除 Javascript 中的列表，即一键删除列表中的所有项目？ - How do you clear a list in Javascript, i.e. delete all items in a list with one button click?
列表项和删除线功能的删除按钮（JavaScript） - Delete button for list items and strikethrough functionality (JavaScript)
如何在JavaScript中向数组添加项？ - How can I add items to an array in JavaScript?
如何使用javascript为列表中的每个元素添加删除按钮 - how to add a delete button for every single element in a list with javascript
单击添加待办事项列表的按钮时，如何生成具有不同背景颜色的项目？ - how can I generate items with different background colors when clicked on a button that add a to do list?
如何仅使用javascript将删除按钮添加到输入显示？ - How can I add a delete button to an input display using only javascript?
相关标签