How to seprate 2 event for 2 child on a parent element in HTML DOM

Question

I want to make 2 function select and delete, but something wrong happen when I click select it triggers function delete and I see the value NaN on the console. How can I fix that problem?

        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>

Additional, Second question: I still don't know the best way to delete the card. I did used jquery $("button[data-delete='" + i + "']").parents('.card').remove();. But it's seem not good:(. Could you help me?

I am newbie, I just know a little function of jquery, could you have any suggest? — Ken Hoàng, Oct 06 '18 at 03:58
@KenHoàng What you wrote almost makes sense, however start with what you want to achieve and then what you did. It's hard to help you when we dont know the goal :) — Deian, Oct 06 '18 at 04:31

Alexander · Accepted Answer · 2018-10-06T04:52:06.743

A click on select control fires the click event and runs onDelete handler (because it listens click event). So, you need to prevent handling clicks on select control within onDelete handler. It may be implemented by checking type of a clicked element using nodeName property.

To remove a card you could use solution from the How to remove the parent element using plain javascript topic. So, the result code will be as following.

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>

Also it is possible to separate event sources using classes and solution from the Native addEventListener with selector like .on() in jQuery topic.

Good luck and happy coding! ;)

score 0 · Answer 2 · answered Oct 06 '18 at 04:18

        
        $(".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>

for your Second question i use jquery to delete card.

score 0 · Answer 3 · answered Oct 06 '18 at 04:56

In JavaScript there are MANY ways to achieve the same problem, I've done a simple snippet in Plain JavaScript to solve both problems you've...

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>

How to seprate 2 event for 2 child on a parent element in HTML DOM

3 Answers3