如何在 HTML DOM 中的父元素上为 2 个子元素分隔 2 个事件答案

【问题标题】：How to seprate 2 event for 2 child on a parent element in HTML DOM如何在 HTML DOM 中的父元素上为 2 个子元素分隔 2 个事件
【发布时间】：2018-10-06 03:23:53
【问题描述】：

我想让 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();。但是好像不太好:(。你能帮帮我吗？

【问题讨论】：

你用 jquery 试过了吗？
我是新手，只知道一点jquery的功能，有什么建议吗？
@KenHoàng 你写的几乎是有道理的，但是从你想要实现的开始，然后你做了什么。当我们不知道目标时，很难帮助您:)

标签： javascript html

【解决方案1】：

单击选择控件会触发click 事件并运行onDelete 处理程序（因为它侦听click 事件）。因此，您需要防止在onDelete 处理程序中处理对选择控件的点击。它可以通过使用nodeName属性检查被点击元素的类型来实现。

要删除卡片，您可以使用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 主题中的类和解决方案来分离事件源。

祝你好运，编码愉快！ ;)

【讨论】：

【解决方案2】：

        
        $(".delet-btn").click(function(){
        $(this).closest(".card").remove();
        });

.card {
    width: 300px;
    height: 80px;
    background-color: blue;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: start;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!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' class="delet-btn">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' class="delet-btn">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' class="delet-btn">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 删除卡。

【讨论】：

【解决方案3】：

在 JavaScript 中有很多方法可以解决同样的问题，我在 Plain JavaScript 中做了一个简单的 sn-p 来解决你遇到的这两个问题......

function changeOption (e) {
  alert("New Option is: " + e.target.value)
}

.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 onClick="this.parentNode.parentNode.removeChild(this.parentNode);">Delete</button>
      CARD 1
      <select onChange="changeOption(event)" name="" id="">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
      </select>
  </div>
  <div class="card">
      <button onClick="this.parentNode.parentNode.removeChild(this.parentNode);">Delete</button>
      CARD 2
      <select onChange="changeOption(event)" name="" id="">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
      </select>
  </div>
  <div class="card">
      <button onClick="this.parentNode.parentNode.removeChild(this.parentNode);">Delete</button>
      CARD 3
      <select onChange="changeOption(event)" name="" id="">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
      </select>
  </div>
</div>

【讨论】：

那太好了。