Javascript 如何制作一个按钮来删除它所在的li元素

我正在尝试创建一个普通的javascript应用程序。 我不想使用jquery，因为我不知道它是如何工作的；）

我需要一个输入，我可以填写一个任务，点击一个按钮添加它，还有一个按钮清除输入字段

当我添加任务时，应该有一个带有“X”的按钮来删除特定的列表项

我不知道如何在一个li元素中创建一个按钮，在单击时删除该li元素

const menu=document.getElementById（“ul”）；
函数callThisOne（）{
var Task=document.getElementById（“addToDo”）.value；
menu.appendChild（创建（任务））；
document.getElementById（“addToDo”）。值=“”；
}
函数创建（名称）{
让listitem=document.createElement（“li”）；
listitem.textContent=名称；
让deleteButton=document.createElement（“按钮”）
deleteButton.onclick=函数（）{
删除按钮。删除
}
让完成=删除按钮+列表项；
返回完成；
}

待办事项清单



清楚的

这是一条平坦的道路
拉滕·齐恩·达特·韦克特

您可以将“删除”按钮附加到列表项

您可以在单击事件侦听器中的列表项上调用

.remove

，因为您有对它的引用

const menu=document.getElementById（“ul”）；
函数callThisOne（）{
var Task=document.getElementById（“addToDo”）.value；
menu.appendChild（创建（任务））；
document.getElementById（“addToDo”）。值=“”；
}
函数创建（名称）{
让listitem=document.createElement（“li”）；
listitem.textContent=名称；
让deleteButton=document.createElement（“按钮”）
deleteButton.textContent='Delete'；
deleteButton.style.marginLeft='5px'；
deleteButton.onclick=函数（）{
remove（）；
}
listitem.appendChild（deleteButton）；
返回列表项；
}

待办事项清单



清楚的

这是一条平坦的道路
拉滕·齐恩·达特·韦克特

您所需要的只是动态创建的“X”按钮来查找最近的

li

祖先，这可以通过该方法完成，然后调用该方法

其他：

这是一种已有25年以上历史的设置事件的技术，它不会像它应得的那样消亡，因为它很容易做到，而且大多数新的程序员只是复制别人无意中使用它的代码。更不用说臭名昭著的W3学校网站仍然错误地提倡这种方法。相反，使用JavaScript进行所有事件绑定，而不是使用事件属性的其他非常古老的技术，例如

onclick

，使用更健壮的现代技术

您可以在下面的代码中看到HTML是多么干净，因为除了HTML什么都没有

const input=document.querySelector（“输入”）；
const list=document.querySelector（“ul”）；
document.querySelector（“button.clear”）.addEventListener（“单击”），函数（evt）{
list.innerHTML=“”；
});
document.querySelector（“按钮”）.addEventListener（“单击”），函数（evt）{
const item=document.createElement（“li”）；
item.textContent=input.value；
input.value=“”；
const delBtn=document.createElement（“按钮”）；
delBtn.classList.add（“delete”）；
delBtn.textContent=“X”
delBtn.addEventListener（“单击”），函数（evt）{
//找到最近的
祖先元素并将其删除
此。最近的（“li”）。删除（）；
});
项目.附件（delBtn）；
列表。追加子项（项目）；
});
.delete{font-weight:bold；margin-left:1em；}
添加

清除
这就是授权的目的：

在菜单中单击任何删除按钮都将删除它所在的LI

我还删除了内联处理程序，因为建议这样做


const menu=document.getElementById（“ul”）；
函数createTask（taskName）{
让listitem=document.createElement（“li”）；
listitem.textContent=任务名称；
让deleteButton=document.createElement（“按钮”）
deleteButton.textContent='Delete'；
deleteButton.classList.add（'delete'）
deleteButton.style.marginLeft='5px'；
listitem.appendChild（deleteButton）；
返回列表项；
}
document.getElementById（'addButton'）。addEventListener（'click'，function（）{
var taskName=document.getElementById（“addToDo”）.value；
if（taskName.trim（）==“”）返回；//无需添加空任务
menu.appendChild（createTask（taskName））；
document.getElementById（“清除”）。单击（）；
})
document.getElementById（'clear'）.addEventListener（'click'，function（）{
document.getElementById（'addToDo'）.select（）；
})
菜单.addEventListener（'click'，函数（e）{
常数tgt=e.target；
if（tgt.classList.contains（'delete'））tgt.closest（'li'）.remove（）；
})
ul{
字体系列：“蒙特塞拉特”，无衬线；
字号：100；
}

待办事项清单



清楚的

这是一条平坦的道路
拉滕·齐恩·达特·韦克特

HTML中的按钮在哪里？@WaisKamal“添加”按钮存在于HTML中。“delete”按钮试图通过JS创建。删除li元素的按钮应使用javascript
let complete=deleteButton+listitem创建
您在哪里定义了
菜单
？也许您需要添加CSS才能应用Google字体。@Absolute初学者OP没有指定任何CSS，我没有删除样式表，但现在请参见updateOk。我对你的答案投了赞成票。