广告点击后如何移除包含广告代码的div元素？

要实现广告被点击后移除对应的#ad div，核心思路是利用事件委托来处理动态加载的广告内容的点击事件——毕竟Google Ads的内容是异步加载的，直接绑定点击可能抓不到元素。

原生JavaScript实现 #

这是最通用的方案，不需要依赖任何库：

// 给整个文档绑定点击事件，委托处理广告区域的点击
document.addEventListener('click', function(e) {
  const adContainer = document.getElementById('ad');
  // 检查点击的目标是否在广告容器内部
  if (adContainer && adContainer.contains(e.target)) {
    // 移除整个广告div
    adContainer.remove();
    // 注意：如果不需要阻止广告的默认跳转，就不要加下面这行
    // e.preventDefault();
  }
});

jQuery实现（如果项目已经用了jQuery） #

如果你的项目依赖jQuery，代码会更简洁：

// 事件委托监听广告容器的点击
$(document).on('click', '#ad', function() {
  // 移除当前点击的广告容器
  $(this).remove();
  // 同样，不需要阻止跳转就去掉return false
  // return false;
});

关键注意点 #

• 事件委托是必须的：因为广告内容（ins.adsbygoogle）是动态生成的，页面加载完成时它可能还不存在，直接绑定点击事件会失效。绑定在document上就能确保捕获到后续加载元素的点击。
• 不要随意阻止默认行为：如果用户点击广告是要跳转到目标页面，加e.preventDefault()或return false会打断这个流程，根据你的需求选择是否添加。
• 确保id唯一：#ad这个id只能对应广告容器，避免误删页面上的其他元素。

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