alert告警功能异常：首个告警可正常关闭，其余告警点击关闭无响应

问题根因 #

你的代码存在两个核心问题导致只有第一个告警能正常关闭：

• HTML规范要求页面内id属性必须唯一，你给所有告警卡片、关闭按钮都复用了相同的id="alert"、id="close"，jQuery的ID选择器只会匹配页面中第一个符合条件的元素，因此事件仅绑定到了第一个关闭按钮上。
• 关闭逻辑里直接写死选择$("#alert")，不管点哪个关闭按钮，都只会操作第一个告警卡片。

修复方案 #

第一步：调整HTML结构，把重复ID替换为类名 #

<div class="alert info showAlert">
    <div class="content">
      <i class="fas fa-exclamation-circle"></i>
      <p>Warning: This is a warning alert!</p>
    </div>
    <button class="close-btn">x</button>
</div>

后续服务端返回的所有告警都复用上面的结构即可，不要重复使用相同id。

第二步：修改JS逻辑，使用事件委托+相对节点选择 #

// 事件绑定到页面固定上层节点（也可以替换为你存放告警的固定容器节点），动态新增的告警无需重新绑定事件即可生效
$(document).on('click', '.close-btn', function() {
    // 选中当前点击的关闭按钮对应的告警卡片
    const $currentAlert = $(this).closest('.alert');
    $currentAlert.removeClass("showAlert");
    $currentAlert.addClass("hideAlert");
    setTimeout(() => {
      $currentAlert.remove();
    }, 500);
});

修复后优势 #

• 所有生成的告警关闭按钮都可以正常触发关闭逻辑
• 后续服务端动态返回插入的新告警，不需要额外绑定事件即可正常使用
• 不会出现误关闭其他告警的问题

内容的提问来源于stack exchange，提问作者joaopcos