我想选择和删除 2 个函数，但是当我单击选择它触发函数删除时发生了一些错误，我在控制台上看到了值 NaN。我该如何解决这个问题？
var collect = document.getElementById('collect');
collect.addEventListener('change', onChange);
collect.addEventListener('click', onDelete);
function onChange(event) {
var changeButton = event.target;
i = parseInt(changeButton.dataset.select);
console.log(i);
}
function onDelete(event) {
var deleteButton = event.target;
i = parseInt(deleteButton.dataset.delete);
console.log(i);
}.card {
width: 300px;
height: 80px;
background-color: blue;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: start;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="collect">
<div class="card">
<button data-delete='1'>Delete</button>
CARD 1
<select name="" id="" data-select='1'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="card">
<button data-delete='2'>Delete</button>
CARD 2
<select name="" id="" data-select='2'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="card">
<button data-delete='3'>Delete</button>
CARD 3
<select name="" id="" data-select='3'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>另外，
第二个问题:我还不知道删除卡片的最佳方法。我确实使用了 jquery $("button[data-delete='"+ i + "']").parents('.card').remove();。但这似乎不太好:(。你能帮帮我吗？
最佳答案
单击选择控件会触发 click 事件并运行 onDelete 处理程序(因为它会监听 click 事件)。因此，您需要防止在 onDelete 处理程序中处理对选择控件的点击。它可以通过使用 nodeName 检查被点击元素的类型来实现。属性(property)。
要删除卡，您可以使用 How to remove the parent element using plain javascript 中的解决方案话题。因此，结果代码如下。
var collect = document.getElementById('collect');
collect.addEventListener('change', onChange);
collect.addEventListener('click', onDelete);
function onChange(event) {
var changeButton = event.target;
if (changeButton.nodeName !== 'SELECT')
return false;
i = parseInt(changeButton.dataset.select);
console.log(i);
}
function onDelete(event) {
var deleteButton = event.target;
if (deleteButton.nodeName !== 'BUTTON')
return false;
i = parseInt(deleteButton.dataset.delete);
console.log(i);
deleteButton.parentNode.parentNode.removeChild(deleteButton.parentNode);
}.card {
width: 300px;
height: 80px;
background-color: blue;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: start;
}<div id="collect">
<div class="card">
<button data-delete='1'>Delete</button> CARD 1
<select name="" id="" data-select='1'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="card">
<button data-delete='2'>Delete</button> CARD 2
<select name="" id="" data-select='2'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="card">
<button data-delete='3'>Delete</button> CARD 3
<select name="" id="" data-select='3'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>还可以使用来自 Native addEventListener with selector like .on() in jQuery 的类和解决方案来分离事件源主题。
祝你好运，编码愉快! ;)
关于javascript - 如何在 HTML DOM 中的父元素上分离 2 个子元素的 2 个事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52675441/