如何让JavaScript删除函数多次启动？

我正在构建一个todo应用程序，我使用一个函数创建一个由用户输入的列表项

输出部分添加了一个事件侦听器，用于侦听显示的每个项目的删除按钮单击。我的问题是删除按钮只对一个项目起作用，然后它就停止工作了

在控制台中，似乎每次我按下按钮时都会调用该函数，但该功能仅在单击一次后有效。我是否需要将所有列表项添加到数组中

const todo=document.getElementById（'todo'）；
常量enter=document.getElementById（'enter'）；
const output=document.getElementById（'output'）；
输入.addEventListener（'单击'，（）=>{
清单项目（待办事项）；
});
让createListItem；
var-deleteBtn；
让我们检查BTN；
函数列表项（todo）{
createListItem=document.createElement（'li'）；
createListItem.innerText=todo.value；
todo.value=''；
appendChild（createListItem）；
checkBtn=document.createElement（'button'）；
deleteBtn=document.createElement（'button'）；
checkBtn.innerText='check'；
deleteBtn.innerText='delete'；
createListItem.append（checkBtn）；
createListItem.append（deleteBtn）；
checkBtn.classList.add（'checkBtn'）；
deleteBtn.classList.add（'deleteBtn'）；
}
output.addEventListener（'click'，deleteFunc'）；
函数deleteFunc（）{
log（'function called'）；
createListItem.remove（）；
}

输入待办事项

您需要委派和使用，因为您的代码只删除最后添加的LI

变量

createListItem

污染了全局范围。在listItem函数中也添加关键字

var

或

let

function deleteFunc(e) {
  console.log('function called');
  const tgt = e.target;
  if (e.target.innerText==="delete") tgt.closest("li").remove()
}

这种委托的另一个好处是，将功能添加到“check”按钮只需

  if (e.target.innerText==="check") ...

我建议使用类和测试

if (e.target.classList.contains("delete") 

而不是innerText-特别是如果您想更改按钮的语言

const todo=document.getElementById（'todo'）；
常量enter=document.getElementById（'enter'）；
const output=document.getElementById（'output'）；
输入.addEventListener（'单击'，（）=>{
清单项目（待办事项）；
});
让createListItem；
var-deleteBtn；
让我们检查BTN；
函数列表项（todo）{
让createListItem=document.createElement（'li'）；//在这里使用let或var
createListItem.innerText=todo.value；
todo.value=''；
appendChild（createListItem）；
checkBtn=document.createElement（'button'）；
deleteBtn=document.createElement（'button'）；
checkBtn.innerText='check'；
deleteBtn.innerText='delete'；
createListItem.append（checkBtn）；
createListItem.append（deleteBtn）；
checkBtn.classList.add（'checkBtn'）；
deleteBtn.classList.add（'deleteBtn'）；
}
output.addEventListener（'click'，deleteFunc'）；
函数deleteFunc（e）{
log（'function called'）；
常数tgt=e.target；
if（e.target.innerText==“delete”）tgt.closest（“li”）.remove（）
}

输入待办事项

您的

createListItem

变量是一个全局变量，设置为最近追加的项，因此delete函数将始终删除最近添加的项。一旦一个元素

el

已经从DOM树中删除，

el.remove（）

是一个no-op，因此它只工作一次

要修复此问题，您可以使用中的事件委派，也可以为每个列表项分配唯一的id，并将其作为参数传递给函数，以确定要删除的内容

第二种方法的示例：

constdeletebyid=id=>document.querySelector（`item-${id}`）。remove（）

首先，尽管：

---

我认为os是因为你的目标是“ul”而不是“li”元素。尝试使用querySelectorAll（）将事件侦听器添加到每个“li”元素，而不是直接以“输出”为目标。

添加另一项时，调用

listItem（）

，将新值设置为

createListItem

。这意味着，当调用

deleteFunc（）

时，

createListItem.remove（）仅在您添加的最后一个元素上执行。如果此项目已被删除，您的运气也会下降

function deleteFunc(e) {
  console.log('function called');
  const { target } = e; // get target
  target.closest("li").remove()
}

删除
输出上的侦听器。（此行：
output.addEventListener（'click'，deleteFunc）；
）

并将侦听器添加到每个
deleteBtn
：

checkBtn.classList.add('checkBtn');
deleteBtn.classList.add('deleteBtn');
deleteBtn.addEventListener('click', deleteFunc);

这可能会帮助您：
找到解决方案


const todo=document.getElementById（'todo'）；
常量enter=document.getElementById（'enter'）；
const output=document.getElementById（'output'）；
输入.addEventListener（'单击'，（）=>{
清单项目（待办事项）；
});
让createListItem；
var-deleteBtn；
让我们检查BTN；
var指数=0；
函数列表项（todo）{
createListItem=document.createElement（'li'）；
createListItem.innerText=todo.value；
createListItem.id='li'+索引；
todo.value=''；
appendChild（createListItem）；
checkBtn=document.createElement（'button'）；
deleteBtn=document.createElement（'button'）；
checkBtn.innerText='check'；
deleteBtn.innerText='delete'；
deleteBtn.id='btn'+索引；
createListItem.append（checkBtn）；
createListItem.append（deleteBtn）；
checkBtn.classList.add（'checkBtn'）；
deleteBtn.classList.add（'deleteBtn'）；
deleteBtn.onclick=function（）{deleteFunc（this）；}；
指数+=1；
}
//output.addEventListener（'click'，deleteFunc'）；
函数deleteFunc（e）{
var rowId=e.id.replace（'btn'，''）；
var row=document.getElementById（'li'+rowId）；
log（'调用的函数'+rowId）；
//警报（rowId）；
如果（行！=null）{
row.remove（）；
}
//log（'function called'）；
//createListItem.remove（）；
}

输入待办事项