为列表中的每个项目实现删除按钮（Javascript）

嗨，作为练习的一部分，我必须用以下实现创建一个todo列表。 当我单击TODO按钮时，会出现一个提示框，在该框中键入我心中的目标，然后将其添加到列表中，并将项目计数设置为列表中的项目数。 列表中的每个项目都有一个删除按钮和一个检查按钮。检查按钮用于确定目标是否已完成，删除按钮用于删除特定目标。 不幸的是，我的删除按钮似乎不起作用。单击它时，它将删除列表中的第一个项目，而不是删除选定的项目。我还是不知道为什么。有人能提供正确的代码来解决这个问题吗？谢谢

const类名称={
待办事项：“待办事项容器”，
待办事项复选框：“待办事项复选框”，
待办事项文字：“待办事项文字”，
待办事项删除：“待办事项删除”，
}
const list=document.getElementById（'todo-list'）
const itemCountSpan=document.getElementById（'item-count'）
const uncheckedCountSpan=document.getElementById（'unchecked-count'）
//此函数用于创建新的列表元素
函数newTodo（）{
var clicks=document.getElementsByTagName（“输入”）.length；
var item=prompt（“请输入目标”）
如果（项==null）{
返回奶酪
}
点击++；
itemCountSpan.innerHTML=单击；
list.innerHTML=list.innerHTML+“
目标：”+项+
“+”删除
”
}
//此函数用于设置未选中的计数
函数检查器（）{
var合计=0；
对于（var i=0；i

*{
框大小：边框框；
}
html，正文{
背景色：#eee；
保证金：0；
填充：0；
}
保险商实验室{
保证金：0；
填充：0；
列表样式类型：无；
}
.中心{
自对准：居中；
}
.流动权利{
显示器：flex；
证明内容：周围的空间；
}
.集装箱{
最大宽度：800px；
保证金：0自动；
填充：10px；
显示器：flex；
弯曲方向：立柱；
背景色：白色；
高度：100vh；
}
.title、.controls、.button{
flex：无；
}
.按钮{
填充：10px 20px；
}
.待办事项清单{
弹性：110；
边缘顶部：20px；
填充：20px；
溢出y：自动；
}
.todo删除{
利润率：10px；
}
.待办事项复选框{
利润率：10px；
}
.todo集装箱{
填充：20px；
边框底部：1px实心#333；
}
.todo容器：类型的第一个{
边框顶部：1px实心#333；
}

待办事项应用程序
我的待办事项应用程序
项目计数：0
未选中计数：0
新待办事项

这将起作用。只需通过

onclick

处理程序传递要删除的

li

元素，并将其从

ul

元素中删除即可

const类名称={
待办事项：“待办事项容器”，
待办事项复选框：“待办事项复选框”，
待办事项文字：“待办事项文字”，
待办事项删除：“待办事项删除”，
}
const list=document.getElementById（'todo-list'）
const itemCountSpan=document.getElementById（'item-count'）
const uncheckedCountSpan=document.getElementById（'unchecked-count'）
//此函数用于创建新的列表元素
函数newTodo（）{
var clicks=document.getElementsByTagName（“输入”）.length；
var item=prompt（“请输入目标”）
如果（项==null）{
返回奶酪
}
点击++；
itemCountSpan.innerHTML=单击；
list.innerHTML=list.innerHTML+“
目标：”+项+
“+”删除
”
}
//此函数用于设置未选中的计数
函数检查器（）{
var合计=0；
对于（var i=0；i

*{
框大小：边框框；
}
html，正文{
背景色：#eee；
保证金：0；
填充：0；
}
保险商实验室{
保证金：0；
填充：0；
列表样式类型：无；
}
.中心{
自对准：居中；
}
.流动权利{
显示器：flex；
证明内容：周围的空间；
}
.集装箱{
最大宽度：800px；
保证金：0自动；
填充：10px；
显示器：flex；
弯曲方向：立柱；
背景色：白色；
高度：100vh；
}
.title、.controls、.button{
flex：无；
}
.按钮{
填充：10px 20px；
}
.待办事项清单{
弹性：110；
边缘顶部：20px；
填充：20px；
溢出y：自动；
}
.todo删除{
利润率：10px；
}
.待办事项复选框{
利润率：10px；
}
.todo集装箱{
填充：20px；
边框底部：1px实心#333；
}
.todo容器：类型的第一个{
边框顶部：1px实心#333；
}

我的待办事项应用程序
项目计数：0
未选中计数：0
新待办事项

我认为您在构建新列表的行中出现了一些语法错误，只是引号的位置。我认为应该是这样的，这样变量clicks实际上被设置为id和值，而不是单词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>"

list.innerHTML=list.innerHTML+“