Javascript 通过向新添加的元素添加事件侦听器来删除这些元素

我想从购物清单中删除项目，html中容易添加的元素正在成功删除。 但是，只要将新元素添加到列表中，该元素就不会被删除，并显示出不希望的行为

这是我的代码：

var del=document.getElementsByClassName（“删除”）；
var ul=文件查询选择器（“ul”）；
变量元素=document.queryselectoral（“li”）；
//创建删除按钮
函数createDeleteButton（）{
var delButton=document.createElement（“按钮”）；
delButton.classList.add（“delete”）；
delButton.appendChild（document.createTextNode（“Delete”）；
addEventListnerToNewlyAddedDeleteItem（document.getElementsByClassName（“delete”）.length）；
返回按钮；
}
//将事件列表器添加到新添加的删除按钮。
函数addEventListnerToNewlyAddedDeleteItem（i）{
del=document.getElementsByClassName（“删除”）；
del[i-1].addEventListener（“单击”），函数（事件）{
删除列表元素（i）；
});
}
//添加事件列表器以删除html文件中指定的按钮。
for（设i=0；i

生日蛋糕删除
蜡烛删除
派对帽删除
阳台删除
花删除

处理动态添加元素的标准方法是使用委托监听器的概念，而不是直接连接到可能动态创建的元素的监听器

这个想法依赖于DOM中冒泡的事件的概念，因此您可以将侦听器附加到最近的祖先元素，而该元素不会被动态更改

代码示例：

const ul=document.querySelector（'ul'）；
//创建删除按钮
函数createDeleteButton（）{
const delButton=document.createElement（“按钮”）；
delButton.classList.add（“delete”）；
delButton.type='button'；
delButton.appendChild（document.createTextNode（“Delete”）；
返回按钮；
}
//单击按钮时删除列表元素的事件侦听器
函数deleteListElement（事件）{
常数{
目标：btn
}=event；//从事件对象获取作为局部变量btn的目标属性
if（btn.matches（'button.delete'））{
btn.closest（'ul'）.removeChild（btn.parentElement）；
}
}
ul.addEventListener（'click'，deleteListener'）；
document.getElementById（'addListElement'）。addEventListener（'click'，function（）{
const li=document.createElement（'li'）；
li.textContent='新列表项'；
const btn=createDeleteButton（）；
李.儿童(btn);；
ul.儿童（li）；
})

生日蛋糕删除
蜡烛删除
派对帽删除
阳台删除
花删除

添加项

您的意思是您正在动态添加项，并且无法删除它们吗？您是否考虑过使用代理侦听器，而不是将侦听器直接附加到按钮上？还有

消息“：“ReferenceError:liElements未定义”

。是@lehm.ro…动态添加的元素未被删除…也无法检索新添加元素的索引。@connexo，否，因为我是web开发新手，不知道委托侦听器。另外，我已经定义了liElementsCan，你显示了在列表中插入新元素的代码吗？@sahil，那么你为什么不将答案标记为正确？我是stackoverflow的新手，因此由于声誉分数较低，它不允许我标记答案@康涅索