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>

Answer 1

尝试以下方法：

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

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

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

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

1 个答案: