如何实现点击独立div的关闭按钮仅关闭当前对应div？

数据老陈

2026-8-12

解决独立预览窗口关闭按钮仅关闭当前窗口的问题

问题根源

你的代码每次创建预览窗口后，用document.querySelector('.preview-close-button')获取关闭按钮——这个方法只会返回整个文档中第一个匹配该类名的元素。当打开多个预览窗口时，后续窗口的关闭事件会错误绑定到第一个窗口的按钮上，导致关闭逻辑混乱，出现点按钮无反应、误关其他窗口的情况。

核心解决方案

要确保每个关闭按钮只控制当前窗口，关键是在当前创建的预览容器内部查找关闭按钮，而非全局搜索。

修改后的代码

function displayPreview(title, content) {
  const previewContainer = document.createElement('div');
  previewContainer.classList.add('preview-container');
  previewContainer.insertAdjacentHTML('afterbegin',
    `<div class="preview-modal">
            <div class="preview-content">
                <div class="preview-title">
                    <h3>${title}</h3>
                </div>
                <div class="preview-text">
                    <p>${content}</p>
                </div>
                <div class="preview-close">
                    <button class="preview-close-button">Close</button>
                </div>
            </div>
        </div>`
  );
  document.body.appendChild(previewContainer);
  // 关键修改：从当前窗口容器内部查找关闭按钮，精准绑定当前窗口的关闭逻辑
  const previewCloseButton = previewContainer.querySelector('.preview-close-button');
  previewCloseButton.addEventListener('click', () => {
    previewContainer.remove();
  });
}