為列表中的每個項目實現刪除按鈕（JavaScript）
[英]Implementing Delete Button For Each Item In List (Javascript)
問題描述
嗨，作為練習的一部分，我必須使用以下實現創建一個待辦事項列表。 當我單擊“待辦事項”按鈕時，會出現一個提示框，在其中輸入我要記住的目標，然后將其添加到列表中，並將項數設置為列表中的項數。
該列表還為每個項目提供一個刪除按鈕和一個檢查按鈕。 復選按鈕用於確定目標是否已完成，刪除按鈕用於刪除特定目標。
不幸的是，我的刪除按鈕似乎無法正常工作。 當我單擊它時，它刪除列表中的第一個項目，而不是刪除選定的項目。 我仍然不確定為什么。 任何人都可以提供正確的代碼來解決此問題嗎？ 謝謝。
const classNames = { TODO_ITEM: 'todo-container', TODO_CHECKBOX: 'todo-checkbox', TODO_TEXT: 'todo-text', TODO_DELETE: 'todo-delete', } const list = document.getElementById('todo-list') const itemCountSpan = document.getElementById('item-count') const uncheckedCountSpan = document.getElementById('unchecked-count') //This function creates a new list element function newTodo() { var clicks = document.getElementsByTagName("input").length; var item = prompt("Please enter a goal", " ") if(item == null){ return cheese } clicks ++; itemCountSpan.innerHTML = clicks; list.innerHTML = list.innerHTML + "<li id = 'clicks'> <input type = checkbox onclick = 'checker()' class = 'todo-checkbox'>Goal: " + item + "</input>" + "<button class = 'todo-delete' value = clicks onclick = 'deleteToDo(this.value)'>Delete</button></li>" } //This function sets the unchecked count function checker(){ var Total = 0; for (var i = 0; i < document.getElementsByTagName("input").length; i++){ if (!document.getElementsByTagName("input")[i].checked){ Total ++; uncheckedCountSpan.innerHTML = Total; } } } //This function deletes a list element selected function deleteToDo(sel_id){ list.removeChild(document.getElementsByTagName("li")[sel_id]); var clicks = document.getElementsByTagName("input").length; itemCountSpan.innerHTML = clicks; }
* { box-sizing: border-box; } html, body { background-color: #eee; margin: 0; padding: 0; } ul { margin: 0; padding: 0; list-style-type: none; } .center { align-self: center; } .flow-right { display: flex; justify-content: space-around; } .container { max-width: 800px; margin: 0 auto; padding: 10px; display: flex; flex-direction: column; background-color: white; height: 100vh; } .title, .controls, .button { flex: none; } .button { padding: 10px 20px; } .todo-list { flex: 1 1 0; margin-top: 20px; padding: 20px; overflow-y: auto; } .todo-delete { margin: 10px; } .todo-checkbox { margin: 10px; } .todo-container { padding: 20px; border-bottom: 1px solid #333; } .todo-container:first-of-type { border-top: 1px solid #333; }
<!DOCTYPE html> <html> <head> <title>TODO App</title> <link rel="stylesheet" type="text/css" href="./styles.css" /> </head> <body> <div class="container center"> <h1 class="center title">My TODO App</h1> <div class="flow-right controls"> <span>Item count: <span id="item-count">0</span></span> <span>Unchecked count: <span id="unchecked-count">0</span></span> </div> <button class="button center" onClick="newTodo(); checker()">New TODO</button> <ul id="todo-list" class="todo-list"></ul> </div> <script src="./script.js"></script> </body> </html>
3 個解決方案
解決方案1
0 已采納 2018-07-04 19:49:02
這將起作用。 只需通過onclick處理程序傳遞要刪除的li元素，然后將其從ul元素中刪除即可。
const classNames = { TODO_ITEM: 'todo-container', TODO_CHECKBOX: 'todo-checkbox', TODO_TEXT: 'todo-text', TODO_DELETE: 'todo-delete', } const list = document.getElementById('todo-list') const itemCountSpan = document.getElementById('item-count') const uncheckedCountSpan = document.getElementById('unchecked-count') //This function creates a new list element function newTodo() { var clicks = document.getElementsByTagName("input").length; var item = prompt("Please enter a goal", " ") if(item == null){ return cheese } clicks ++; itemCountSpan.innerHTML = clicks; list.innerHTML = list.innerHTML + "<li id = 'clicks'> <input type = checkbox onclick = 'checker()' class = 'todo-checkbox'>Goal: " + item + "</input>" + "<button class = 'todo-delete' value = clicks onclick = 'deleteToDo(this.parentElement)'>Delete</button></li>" } //This function sets the unchecked count function checker(){ var Total = 0; for (var i = 0; i < document.getElementsByTagName("input").length; i++){ if (!document.getElementsByTagName("input")[i].checked){ Total ++; uncheckedCountSpan.innerHTML = Total; } } } //This function deletes a list element selected function deleteToDo(elem){ list.removeChild(elem); }
* { box-sizing: border-box; } html, body { background-color: #eee; margin: 0; padding: 0; } ul { margin: 0; padding: 0; list-style-type: none; } .center { align-self: center; } .flow-right { display: flex; justify-content: space-around; } .container { max-width: 800px; margin: 0 auto; padding: 10px; display: flex; flex-direction: column; background-color: white; height: 100vh; } .title, .controls, .button { flex: none; } .button { padding: 10px 20px; } .todo-list { flex: 1 1 0; margin-top: 20px; padding: 20px; overflow-y: auto; } .todo-delete { margin: 10px; } .todo-checkbox { margin: 10px; } .todo-container { padding: 20px; border-bottom: 1px solid #333; } .todo-container:first-of-type { border-top: 1px solid #333; }
<div class="container center"> <h1 class="center title">My TODO App</h1> <div class="flow-right controls"> <span>Item count: <span id="item-count">0</span></span> <span>Unchecked count: <span id="unchecked-count">0</span></span> </div> <button class="button center" onClick="newTodo(); checker()">New TODO</button> <ul id="todo-list" class="todo-list"></ul> </div>
解決方案2
0 2018-07-04 19:57:54
我認為您在建立新列表li的行中存在一些語法錯誤，只是引號的位置。 我認為應該這樣，以便將clicks變量實際上設置為id和value而不是單詞“ clicks”。
list.innerHTML = list.innerHTML + "<li id = '" + clicks + "'> <input type = 'checkbox' onclick = 'checker()' class = 'todo-checkbox'>Goal: " + item +
"</input>" + "<button class = 'todo-delete' value = '" + clicks + "' onclick = 'deleteToDo(this.parentElement)'>Delete</button></li>"
解決方案3
0 2018-07-04 20:00:21
需要將value設置為該函數中的實際變量。 所以我所做的就是：
... value = " + (clicks-1) ...
//We use (clicks - 1) because the array is 0 based but clicks was previously incremented.
const classNames = { TODO_ITEM: 'todo-container', TODO_CHECKBOX: 'todo-checkbox', TODO_TEXT: 'todo-text', TODO_DELETE: 'todo-delete', } const list = document.getElementById('todo-list') const itemCountSpan = document.getElementById('item-count') const uncheckedCountSpan = document.getElementById('unchecked-count') //This function creates a new list element function newTodo() { var clicks = document.getElementsByTagName("input").length; var item = prompt("Please enter a goal", " ") if(item == null){ return cheese } clicks++; itemCountSpan.innerHTML = clicks; list.innerHTML = list.innerHTML + "<li id = 'clicks'> <input type = checkbox onclick = 'checker()' class = 'todo-checkbox'>Goal: " + item + "</input>" + "<button class = 'todo-delete' value = " + (clicks-1) + " onclick = 'deleteToDo(this.value)'>Delete</button></li>" } //This function sets the unchecked count function checker(){ var Total = 0; for (var i = 0; i < document.getElementsByTagName("input").length; i++){ if (!document.getElementsByTagName("input")[i].checked){ Total ++; uncheckedCountSpan.innerHTML = Total; } } } //This function deletes a list element selected function deleteToDo(sel_id){ list.removeChild(document.getElementsByTagName("li")[sel_id]); var clicks = document.getElementsByTagName("input").length; itemCountSpan.innerHTML = clicks; }
* { box-sizing: border-box; } html, body { background-color: #eee; margin: 0; padding: 0; } ul { margin: 0; padding: 0; list-style-type: none; } .center { align-self: center; } .flow-right { display: flex; justify-content: space-around; } .container { max-width: 800px; margin: 0 auto; padding: 10px; display: flex; flex-direction: column; background-color: white; height: 100vh; } .title, .controls, .button { flex: none; } .button { padding: 10px 20px; } .todo-list { flex: 1 1 0; margin-top: 20px; padding: 20px; overflow-y: auto; } .todo-delete { margin: 10px; } .todo-checkbox { margin: 10px; } .todo-container { padding: 20px; border-bottom: 1px solid #333; } .todo-container:first-of-type { border-top: 1px solid #333; }
<!DOCTYPE html> <html> <head> <title>TODO App</title> <link rel="stylesheet" type="text/css" href="./styles.css" /> </head> <body> <div class="container center"> <h1 class="center title">My TODO App</h1> <div class="flow-right controls"> <span>Item count: <span id="item-count">0</span></span> <span>Unchecked count: <span id="unchecked-count">0</span></span> </div> <button class="button center" onClick="newTodo(); checker()">New TODO</button> <ul id="todo-list" class="todo-list"></ul> </div> <script src="./script.js"></script> </body> </html>
單擊相應的刪除按鈕時，如何在每個列表項旁邊添加按鈕以刪除該項目
[英]How to add buttons next to each list item to delete the item when clicked on its corresponding delete button
如何使用按鈕刪除通過 javascript 添加的“待辦事項”列表項
[英]How to use a button to delete a "to do" list item that was added through javascript
如何使同樣使用列表項創建的按鈕起作用？ 我希望它刪除數組的當前項。 每個項目都有自己的按鈕
[英]How do i make the button that's also created with the list item work? I want it to delete the current item of the array. Each item has it own button
JavaScript 待辦事項列表 - 刪除按鈕僅出現在最近添加的項目上
[英]JavaScript To Do List - Delete button is only appearing on the most recent item added
如何為使用 javascript 添加的每個列表項添加刪除按鈕？
[英]How can I add a delete button for every list item added with javascript?
刪除最后一個待辦事項列表項時如何刪除一個按鈕（JavaScript）
[英]How to delete one button when deleting last to-do list item (JavaScript)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.