如何在文本之前添加复选框，当用户选中复选框时，文本被删除但仍保留在列表中？

Question

我尝试了几次在文本之前添加复选框，但它不起作用。谁能告诉我该怎么做?

function showTasks() {
let getLocalStorage = localStorage.getItem("New Todo"); //get local storage
if (getLocalStorage == null) {
//if local storage is null
listArr = []; //create empty array
} else {
listArr = JSON.parse(getLocalStorage); //convert json string into a js object
}
const pendingNumb = document.querySelector(".pendingNumb");
pendingNumb.textContent = listArr.length; //pass the length in pendingNumb
if (listArr.length > 0) {
deleteAllBtn.classList.add("active");
} else {
deleteAllBtn.classList.remove("active");
}
let newLiTag = "";
let x = document.createElement("input");
x.setAttribute("type", "checkbox");
listArr.forEach((element, index) => {
newLiTag += `<li>${element}<span onclick = "deleteTask(${index})" ><i class="fas fa-trash"></i></span> </li>`;
});
todoList.innerHTML = newLiTag; //add new li tag inside ul
inputBox.value = ""; //make input field blank once task added
}

Answer 1

如果我理解正确的话，您应该希望在每个ToDo项之前添加一个复选框。如果是这种情况，您的代码就没有这样做。您只创建了一个<input type="checkbox">元素并将其分配给x变量，但是您没有在任何地方使用它。

我简化了您的代码，专注于<li>元素的创建，其中每个元素都有一个复选框。代码片段如下。您可以点击Run code snippet按钮来查看它的动作。

// Simulating a list of ToDos
const listArr = ['buy bread', 'save for a PS5'];
function showTasks() {
// array to store the ToDo elements
const listItems = [];
// for each item, create an <li> element containing an <input type="checkbox">,
// the ToDo value and a <button> for delete action
listArr.forEach((element, index) => {
let li = `<li id="todo_${index}">`;
li += `<input type="checkbox" value="${index}" />`;
li += element;
li += ` <button onclick="deleteTask(${index})">Delete</button>`;
li += '</li>';
listItems.push(li);
});
// join array items, resulting in a string containing all of the <li> elements 
document.querySelector('#todo_list').innerHTML = listItems.join('');
}
function deleteTask (index) {
console.log(`Delete element ${index}`);
}
showTasks();

<ul id="todo_list">
</ul>

Answer 2

你的span有

onclick ="deleteTask(${指数})

但是这里没有提供。这个函数是什么?