如何讓按鈕出現在列表項旁邊？
[英]How do I get a button to appear alongside the list items?
問題描述
我正在使用 Javascript 制作一個基本的待辦事項列表應用程序。 我可以輸入列表元素，但我無法在列表元素旁邊制作“刪除”按鈕，以及讓該按鈕刪除列表中的項目。
function todoList() { var item = document.getElementById("todoInput").value var text = document.createTextNode(item) var newItem = document.createElement("li") newItem.appendChild(text) document.getElementById("todoList").appendChild(newItem) var remove = document.createElement('button'); remove.classList.add('remove'); remove.innerHTML = "X"; remove.addEventListener('click', () => this.remove(todoInput)); }
<form id="todoForm"> <label>Task Name: </label> <input id="todoInput"> <button type="button" onclick="todoList()">Add Task</button> </form> <ol id="todoList"> </ol>
3 個解決方案
解決方案1
1 2020-04-08 19:03:56
您根本不是 append 新創建的remove按鈕元素到 DOM。 如果您應該在 append newItem之前將newItem作為子項附加到 DOM。
此外，如果您希望刪除按鈕刪除一個條目，它就像在其回調中調用newItem.remove()一樣簡單。 由於變量是 function 范圍內的每個刪除按鈕都會“記住”它應該刪除哪個<li>元素。 無需遍歷父 DOM 樹來找出要刪除的節點：
function todoList() { const item = document.getElementById("todoInput").value; const text = document.createTextNode(item); const newItem = document.createElement("li"); newItem.appendChild(text); // Create the button const remove = document.createElement('button'); remove.classList.add('remove'); remove.innerHTML = "X"; remove.addEventListener('click', () => newItem.remove()); // Make sure you also append it to the new `<li>` element. newItem;appendChild(remove). document.getElementById("todoList").appendChild(newItem) }
<form id="todoForm"> <label>Task Name: </label> <input id="todoInput"> <button type="button" onclick="todoList()">Add Task</button> </form> <ol id="todoList"> </ol>
解決方案2
0 2020-04-08 19:03:52
我添加到東西
1-將元素更改為輸入，然后將其類型設置為按鈕
2-將按鈕附加到子列表中。
function todoList() { var item = document.getElementById("todoInput").value var text = document.createTextNode(item) var newItem = document.createElement("li") newItem.appendChild(text) document.getElementById("todoList").appendChild(newItem); var remove = document.createElement('input');//Element is input remove.type="button"; // type is button or whaterver you want remove.classList.add('remove'); remove.innerHTML = "X"; remove.addEventListener('click', () => this.remove(todoInput)); newItem.append(remove); }
.remove{ margin-left: 7px; }
<.DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>TaskApp</h1> <h2>Version 0:1</h2> <form id="todoForm"> <label>Task Name. </label> <input id="todoInput"> <button type="button" onclick="todoList()">Add Task</button> </form> <ol id="todoList"> </ol> <script src="script.js"></script> </body> </html>
解決方案3
0 2020-04-08 19:04:12
我對您的代碼進行了兩項主要調整。 首先，我將刪除按鈕添加到新創建的li中，然后我重寫了它的點擊處理程序以刪除它的父元素：
function todoList() { var item = document.getElementById("todoInput").value var text = document.createTextNode(item) var newItem = document.createElement("li") var remove = document.createElement('button'); remove.classList.add('remove'); remove.innerHTML = "X"; remove.addEventListener('click', ({target}) => target.parentElement.remove()); newItem.appendChild(text) newItem.appendChild(remove) document.getElementById("todoList").appendChild(newItem) }
<form id="todoForm"> <label>Task Name: </label> <input id="todoInput"> <button type="button" onclick="todoList()">Add Task</button> </form> <ol id="todoList"> </ol>
如何在帶有分頁的列表末尾的某些項目旁邊顯示消息？
[英]How to show message alongside some items which are at the end of the list with pagination?
如何清除 Javascript 中的列表，即一鍵刪除列表中的所有項目？
[英]How do you clear a list in Javascript, i.e. delete all items in a list with one button click?
單擊添加待辦事項列表的按鈕時，如何生成具有不同背景顏色的項目？
[英]how can I generate items with different background colors when clicked on a button that add a to do list?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.