Hey 兄弟，我来帮你看看这个问题！你遇到的情况其实很常见，是因为元素还没被创建出来，你就去给它绑定事件了，咱们一步步理清楚：

你在createAd函数里，一开始就用document.querySelector去拿.ad-box和.close-button，但这时候你还没把HTML插入到ad-container里呢！这两个元素根本还不存在于DOM中，所以你拿到的closeButtonElement其实是null，给null加点击事件当然不会有任何效果，之后你才把HTML插进去，这时候元素才出现，但事件绑定早就失败了。

给你两个靠谱的解决方案：

• 方案一：调整代码顺序，先把HTML插入DOM，再获取元素绑定事件
  把获取元素和绑定事件的代码，放到你给adContainerElement赋值innerHTML之后。这样元素已经存在于DOM里了，你能正确拿到它们，事件绑定也就生效了。修改后的代码如下：

function createAd() {
    const adContainerElement = document.querySelector('.ad-container');
    let localHtml = 
    `      
        <div class="ad-box">
            <div class="close-button">X</div>
            <div class="ad-text">Google Ads</div>
        </div>
    `;    
    adContainerElement.innerHTML = localHtml;

    // 现在元素已经存在了，再获取并绑定事件
    const adBoxElement = document.querySelector('.ad-box');
    const closeButtonElement = document.querySelector('.close-button');
    closeButtonElement.addEventListener('click', () => adBoxElement.remove());
}

setTimeout(createAd, 2000);

• 方案二：用事件委托，更适合动态元素场景
  事件委托利用DOM的事件冒泡机制，提前给父容器ad-container绑定事件，不管子元素什么时候被添加进来，都能触发事件。这种方法哪怕之后创建更多广告，也不用重复绑定事件，非常灵活：

function createAd() {
    const adContainerElement = document.querySelector('.ad-container');
    let localHtml = 
    `      
        <div class="ad-box">
            <div class="close-button">X</div>
            <div class="ad-text">Google Ads</div>
        </div>
    `;    
    adContainerElement.innerHTML = localHtml;
}

// 提前给父容器绑定事件，通过冒泡判断点击目标
document.querySelector('.ad-container').addEventListener('click', (e) => {
    // 确认点击的是关闭按钮
    if(e.target.classList.contains('close-button')) {
        // 找到对应的广告盒子并移除
        e.target.closest('.ad-box').remove();
    }
});

setTimeout(createAd, 2000);

这样改完之后，不管用不用setTimeout，你的关闭按钮都能正常工作啦！

备注：内容来源于stack exchange，提问作者Ehsan Ghanemi