Как разделить 2 события для 2 дочерних элементов на родительский элемент в HTML DOM

Я хочу выбрать и удалить 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.info(i);
        }

        function onDelete(event) {
            var deleteButton = event.target;
            i = parseInt(deleteButton.dataset.delete);
            console.info(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?

— 06.10.2018 05:39

Я новичок, я просто знаю небольшую функцию jquery, не могли бы вы что-нибудь предложить?

— 06.10.2018 05:58

@ KenHoàng То, что вы написали, почти имеет смысл, однако начните с того, чего вы хотите достичь, а затем с того, что вы сделали. Трудно помочь, когда мы не знаем цели :)

— 06.10.2018 06:31

javascript html

06.10.2018 05:23

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

        
        $(".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 для удаления карты.

06.10.2018 06:18

Ответ принят как подходящий

Щелчок на элементе управления select запускает событие click и запускает обработчик onDelete (поскольку он прослушивает событие click). Итак, вам нужно предотвратить обработку щелчков по элементу выбора в обработчике onDelete. Это может быть реализовано путем проверки типа элемента, на который был выполнен щелчок, с помощью свойства nodeName.

Для удаления карты можно использовать решение из темы Как удалить родительский элемент с помощью простого 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.info(i);
}

function onDelete(event) {
  var deleteButton = event.target;
  if (deleteButton.nodeName !== 'BUTTON')
    return false;
  i = parseInt(deleteButton.dataset.delete);
  console.info(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>

Также возможно разделение источников событий с помощью классов и решений из темы Собственный addEventListener с селектором вроде .on () в jQuery.

Удачи и удачного кодирования! ;)

06.10.2018 06:21

В JavaScript есть МНОГО способов решить ту же проблему, я сделал простой фрагмент в Обычный JavaScript, чтобы решить обе проблемы, которые вы ...

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>

Это было бы прекрасно.

— 06.10.2018 07:16

06.10.2018 06:56