Javascript 如何在HTML DOM中为父元素上的2个子元素分离2事件

我想让2个函数选择并删除，但当我单击选择时出错，它触发函数删除，我在控制台上看到值NaN。我怎样才能解决这个问题

var collect=document.getElementById（'collect'）；
collect.addEventListener（'change'，onChange）；
collect.addEventListener（'click'，onDelete）；
函数onChange（事件）{
var changeButton=event.target；
i=parseInt（changeButton.dataset.select）；
控制台日志（i）；
}
函数onDelete（事件）{
var deleteButton=event.target；
i=parseInt（deleteButton.dataset.delete）；
控制台日志（i）；
}

.card{
宽度：300px；
高度：80px；
背景颜色：蓝色；
边缘底部：10px；
显示器：flex；
证明内容：之间的空间；
对齐项目：开始；
}

文件
删除
卡1
1.
2.
3.
删除
卡2
1.
2.
3.
删除
卡片3
1.
2.
3.

$（“.delet btn”）。单击（函数（）{
$（this）.closed（“.card”）.remove（）；
});
.card{
宽度：300px；
高度：80px；
背景颜色：蓝色；
边缘底部：10px；
显示器：flex；
证明内容：之间的空间；
对齐项目：开始；
}

文件
删除
卡1
1.
2.
3.
删除
卡2
1.
2.
3.
删除
卡片3
1.
2.
3.
单击select控件将触发
单击事件并运行
onDelete
处理程序（因为它侦听
单击事件）。因此，您需要防止在
onDelete
处理程序中处理对select控件的单击。它可以通过使用属性检查单击的元素的类型来实现

要移除卡，可以使用主题中的解决方案。因此，结果代码如下所示


var collect=document.getElementById（'collect'）；
collect.addEventListener（'change'，onChange）；
collect.addEventListener（'click'，onDelete）；
函数onChange（事件）{
var changeButton=event.target；
if（changeButton.nodeName！=“选择”）
返回false；
i=parseInt（changeButton.dataset.select）；
控制台日志（i）；
}
函数onDelete（事件）{
var deleteButton=event.target；
如果（deleteButton.nodeName！=='BUTTON'）
返回false；
i=parseInt（deleteButton.dataset.delete）；
控制台日志（i）；
deleteButton.parentNode.parentNode.removeChild（deleteButton.parentNode）；
}
.card{
宽度：300px；
高度：80px；
背景颜色：蓝色；
边缘底部：10px；
显示器：flex；
证明内容：之间的空间；
对齐项目：开始；
}

删除卡1
1.
2.
3.
删除卡2
1.
2.
3.
删除卡3
1.
2.
3.
在JavaScript中有很多方法可以解决相同的问题，我在纯JavaScript中做了一个简单的片段来解决您遇到的两个问题


功能更改选项（e）{
警报（“新选项为：”+e.target.value）
}
.card{
宽度：300px；
高度：80px；
背景颜色：蓝色；
边缘底部：10px；
显示器：flex；
证明内容：之间的空间；
对齐项目：开始；
}

删除
卡1
1.
2.
3.
删除
卡2
1.
2.
3.
删除
卡片3
1.
2.
3.
你用jquery试过了吗？我是新手，我只知道jquery的一点功能，你有什么建议吗？@KenHoáng你写的几乎是有道理的，但是从你想实现的目标开始，然后是你做的事情。当我们不知道目标时，很难帮助你：）那太好了。