javascript - 如何使用 Javascript 一次关闭同一个 div 类的每个实例

Question

我要做的非常简单：每次单击关闭按钮时关闭 div 的每个实例。我得到的只是第一个点击的实例关闭，但其余的不能。

我必须说我来自 Python，我对 Javascript 不是很熟悉。我认为有某种方式使用 ID 而不是类？这是我的 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>

标签： javascriptflaskdom-eventsbulma

Answer 1

试试这个：

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

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

您的代码的问题是您将 $notification 设置为最后一个，因此当 eventListener 触发 $notification 时始终是最后一个。