如何实现用户点击广告时移除广告？如何防止同一广告被重复点击？

针对你提出的两个需求，我整理了简洁的实现方案，用jQuery就能轻松完成：

一、点击广告时直接移除该广告 #

你之前提供的点击隐藏代码可以调整为点击广告本身就触发移除，不用依赖额外按钮。用户点击广告区域时，直接把对应的广告容器从DOM里彻底移除：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  // 绑定广告容器的点击事件
  $("#adbox").on("click", function(){
    $(this).remove(); // 彻底删除DOM元素，若只需隐藏可替换为hide()
  });
});
</script>

<!-- 你的广告容器 -->
<div id="adbox">
  <!-- 广告内容 -->
</div>

二、防止同一广告被多次点击 #

要避免重复触发点击逻辑，有两种常用思路：

方法1：点击后解绑事件 #

第一次点击后，直接移除广告的点击事件，后续点击就不会再触发：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("#adbox").on("click", function(){
    $(this).remove();
    $(this).off("click"); // 移除点击绑定，阻止后续触发
  });
});
</script>

方法2：用状态标记判断点击状态 #

这种方式更灵活，适合需要记录点击状态的场景：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  let adHasClicked = false;
  $("#adbox").on("click", function(){
    if(!adHasClicked){
      adHasClicked = true;
      $(this).remove();
      // 这里还可以添加点击统计、跳转等额外逻辑
    }
  });
});
</script>

额外优化：结合定时自动移除 #

如果需要兼顾“用户点击移除”和“超时自动移除”，可以把两种逻辑结合起来：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  let adHasClicked = false;
  
  // 点击移除逻辑
  $("#adbox").on("click", function(){
    if(!adHasClicked){
      adHasClicked = true;
      $(this).remove();
    }
  });
  
  // 5秒后自动移除（用户未点击时触发）
  setTimeout(function(){
    if(!adHasClicked){
      $("#adbox").remove();
    }
  }, 5000);
});
</script>

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