点击GDPR按钮批量加载YouTube iframe时出现removeChild错误的排查

我有一个包含多个YouTube视频的网页，每个视频都放在独立区块里。为符合GDPR合规要求，这些视频需要在用户点击Cookie授权同意按钮后才能加载。每个视频区块都配有独立的GDPR提示信息和同意按钮。我想要实现的效果是：点击任意一个同意按钮，就能移除所有视频区块的GDPR提示，同时为所有区块加载对应的视频iframe（比如3个视频区块时，点任意按钮都能加载全部3个视频）。

目前的问题是：点击按钮只能影响单个页面元素，而且还会出现错误：

'Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.'

以下是当前使用的代码：

function addVideoEmbed() {
  let containers = document.querySelectorAll(".youtube-container");
  let wrappers = document.querySelectorAll(".youtube-wrapper");
  let buttons = document.querySelectorAll(".gdpr-acceptance-button");
  let iframe = document.createElement("iframe");
  let youtubeSources = [
    "videoLink1",
    "videoLink2",
    "videoLink3"
  ];

  for (i = 0; i < buttons.length; i++) {
    let container = containers[i];
    let button = buttons[i];
    let wrap = wrappers[i];
    let source = youtubeSources[i];

    button.addEventListener("click", function () {
      // set iframe attributes
      iframe.setAttribute(
        "style",
        "width:100%; height:100%; position:absolute;"
      );
      iframe.setAttribute("src", source);
      iframe.setAttribute("frameborder", "0");
      // remove all in container
      container.removeChild(wrap);
      // add iframe to container
      container.appendChild(iframe);
    });
  }
}
addVideoEmbed();

错误成因 #

• 闭包变量泄漏：循环里的i没有用let声明，导致所有点击事件回调共享同一个i变量，最终所有回调里的container、wrap都指向循环最后一次的元素。点击按钮时，回调里的wrap根本不是当前container的子节点，自然触发removeChild错误。
• 单个iframe重复复用：你只创建了一个iframe元素，DOM元素不能同时存在于多个父节点，点击按钮时这个iframe会被移到当前容器，后续操作会导致节点归属混乱，进一步加剧错误。
• 事件逻辑只处理单个元素：当前每个按钮的点击事件只处理对应索引的单个容器，完全没实现“点击任意按钮加载所有视频”的需求。

修复后的代码 #

function addVideoEmbed() {
  const containers = document.querySelectorAll(".youtube-container");
  const wrappers = document.querySelectorAll(".youtube-wrapper");
  const buttons = document.querySelectorAll(".gdpr-acceptance-button");
  const youtubeSources = [
    "videoLink1",
    "videoLink2",
    "videoLink3"
  ];

  // 统一处理函数：点击任意按钮都加载所有视频
  function loadAllVideos() {
    containers.forEach((container, index) => {
      const wrap = wrappers[index];
      const source = youtubeSources[index];

      // 先确认wrap是container的子节点，再移除，避免报错
      if (container.contains(wrap)) {
        container.removeChild(wrap);
      }

      // 每个视频创建独立的iframe，避免复用冲突
      const iframe = document.createElement("iframe");
      iframe.setAttribute("style", "width:100%; height:100%; position:absolute;");
      iframe.setAttribute("src", source);
      iframe.setAttribute("frameborder", "0");
      iframe.setAttribute("allow", "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture");
      iframe.setAttribute("allowfullscreen", "");

      container.appendChild(iframe);
    });

    // 加载完成后移除所有按钮的点击事件，防止重复操作
    buttons.forEach(btn => btn.removeEventListener("click", loadAllVideos));
  }

  // 给所有按钮绑定同一个处理函数
  buttons.forEach(btn => btn.addEventListener("click", loadAllVideos));
}
addVideoEmbed();

修复要点 #

• 所有按钮共享同一个点击处理函数，实现“点任意按钮加载所有视频”的需求。
• 为每个视频创建独立的iframe，解决DOM节点重复添加的冲突问题。
• 移除节点前先检查归属关系，避免removeChild报错。
• 用forEach替代for循环，配合const声明变量，彻底解决闭包变量泄漏的问题。
• 加载完成后移除所有按钮的事件监听，防止用户多次点击触发无效操作。

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