如何使用 Javascript 一次关闭相同 div class 的每个实例

Question

我想做的事情非常简单：每次单击关闭按钮时关闭 div 的每个实例。相反，我得到的只是第一个点击的实例关闭，而其余的则不能。

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

Answer 1

试试这个：

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

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

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

如何使用 Javascript 一次关闭相同 div class 的每个实例

How do I close each instance of the same div class one a time using Javascript

javascript

flask

dom-events

bulma