无法读取未定义的属性（读取“销毁”）答案

【问题标题】：Cannot read properties of undefined (reading 'destroy')无法读取未定义的属性（读取“销毁”）
【发布时间】：2021-12-07 13:30:04
【问题描述】：

如何在代码中解决这个问题？ https://jsfiddle.net/a6dp1soy/

要重现错误，请单击 X 按钮

首先点击播放 svg，然后点击 X 按钮。

  const resetVideos = document.querySelectorAll(".exit");
  resetVideos.forEach(function resetVideoHandler(video) {
    video.addEventListener("click", function resetVideoHandler() {
      video.parentElement.player.destroy();
      console.log("hit")
    });
  })

【问题讨论】：

标签： javascript youtube youtube-api

【解决方案1】：

一个解决方案可能只是替换

video.parentElement.player.destroy();

与

video.parentElement.parentElement.removeChild(video.parentElement);

我从这里引用了 How to remove the parent element using plain Javascript 和 video.parentElement 对象

然后下一部分将在点击播放时再次创建该元素

【讨论】：

第二次点击同一个播放 svg 后，屏幕为空。代码不起作用jsfiddle.net/fqombdxu

【解决方案2】：

您应该找到类为 wrap 的元素，您的播放器在创建时存储在该元素中。

  const resetVideos = document.querySelectorAll(".exit");
  resetVideos.forEach(function resetVideoHandler(video) {
    video.addEventListener("click", function resetVideoHandler() {
      var player = this.parentElement.getElementsByClassName('wrap')[0].player;
      player.destroy();
      console.log("hit")
    });
  });

JS 小提琴： https://jsfiddle.net/c54b0faw/

【讨论】：