如何在每个列表项之前添加一个复选框，并在列表项之后添加一个删除按钮？

Question

I created a to do list with HTML/Javascript. 我用HTML / Javascript创建了一个待办事项清单。 How do add a checkbox on the left of every Item added to the list and a X button to the right of every item added to delete it from the list. 如何在添加到列表的每个项目的左侧添加一个复选框，并在添加的每个项目的右侧添加一个X按钮，以将其从列表中删除。 This is what I got so far 这就是我到目前为止

 var inputItem = document.getElementById("inputItem"); inputItem.focus(); // adds input Item to list function addItem(list, input) { var inputItem = this.inputItem; var list = document.getElementById(list); var listItem = document.createElement("li"); listItem.innerText = input.value; list.appendChild(listItem); inputItem.focus(); inputItem.select(); return false; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>To-Do List</title> </head> <body> <h1>To-Do List</h1> <form onsubmit="return addItem('list', this.inputItem)"> <input type="text" id="inputItem" onfocus="this.value=''" onselect="this.value=''" placeholder="Enter a Task"> <input type="submit"> </form> <ul id="list"> </ul> </body> </html>

Answer 1

Continuing using the same technique you were before, just keep creating the elements you need and appending them to the list item. 继续使用以前的相同技术，只需继续创建所需的元素并将其添加到列表项即可。

 var inputItem = document.getElementById("inputItem"); inputItem.focus(); // adds input Item to list function addItem(list, input) { var inputItem = this.inputItem; var list = document.getElementById(list); var listItem = document.createElement("li"); // Configure the delete button var deleteButton = document.createElement("button"); deleteButton.innerText = "X"; deleteButton.addEventListener("click", function() { console.log("Delete code!"); }); // Configure the check box var checkBox = document.createElement("input"); checkBox.type = 'checkbox'; // Configure the label var label = document.createElement("label"); var labelText = document.createElement("span"); labelText.innerText = input.value; // Put the checkbox and label text in to the label element label.appendChild(checkBox); label.appendChild(labelText); // Put the label (with the checkbox inside) and the delete // button into the list item. listItem.appendChild(label); listItem.appendChild(deleteButton); list.appendChild(listItem); inputItem.focus(); inputItem.select(); return false; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>To-Do List</title> </head> <body> <h1>To-Do List</h1> <form onsubmit="return addItem('list', this.inputItem)"> <input type="text" id="inputItem" onfocus="this.value=''" onselect="this.value=''" placeholder="Enter a Task"> <input type="submit"> </form> <ul id="list"> </ul> </body> </html>

如何在每个列表项之前添加一个复选框，并在列表项之后添加一个删除按钮？

问题描述

1 个解决方案

解决方案1
2 已采纳 2018-06-16 19:32:46

如何在每个列表项之前添加一个复选框，并在列表项之后添加一个删除按钮？

问题描述

1 个解决方案

解决方案1 2 已采纳 2018-06-16 19:32:46

解决方案1
2 已采纳 2018-06-16 19:32:46