Как закрыть каждый экземпляр одного и того же класса div по одному, используя Javascript - PullRequest
Новая
       33

Как закрыть каждый экземпляр одного и того же класса div по одному, используя Javascript

1 голос
/ 12 июля 2019

То, что я пытаюсь сделать, очень просто: закрывайте каждый экземпляр div при каждом нажатии кнопки закрытия.Вместо этого я получаю только первый закрытый экземпляр, но остальные не могут.

Я должен сказать, что я из Python, и я не очень знаком с Javascript.Я думаю, что есть какой-то, используя идентификатор вместо класса?Вот мой HTML (с Jinja) код для динамического создания объектов, которые я бы хотел закрыть при нажатии: 

{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages%}   
<div class="notification {{ category }} is-bold">
<button class="delete"></button>
{{ message }}
 </div>
  {% endfor %}
  {% endif %}
  {% endwith %}

А вот мой код Javascript: 

// notification remover
document.addEventListener('DOMContentLoaded', () => {

(document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
$notification = $delete.parentNode;
$delete.addEventListener('click', () => {
        $notification.parentNode.removeChild($notification);
});
});
});

Примерсгенерированный html: 

<div class="notification is-info is-bold">
<button class="delete"></button>

<div class="notification is-info is-bold">
<button class="delete"></button>

<div class="notification is-info is-bold">
<button class="delete"></button>

1 Ответ

1 голос
/ 12 июля 2019

Попробуйте вместо этого: 

document.addEventListener('DOMContentLoaded', () => {

  (document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
    $delete.addEventListener('click', (event) => {
      event.target.parentNode.remove();
    });
  });
});

Проблема с вашим кодом заключается в том, что вы устанавливаете $ уведомление с последним, поэтому, когда eventListener запускает $ уведомление, всегда последнее.

...