点击exit按钮无法正确移除对应播放器，仅移除第一个的问题修复

问题现象 #

点击每个<code>exit</code>按钮本应移除对应的视频播放器，但实际只有第一个播放器能被移除。

复现步骤 #

• 点击第一个蓝色Play按钮，随后点击Exit按钮，控制台输出console.log("removePlayer");，功能正常。
• 对后续的视频播放器执行相同操作：点击Play按钮后再点击Exit按钮，完全没有反应，除非第一个播放器处于播放状态。

代码示例 #

HTML #

<div class="container">
  <div class="curtain">
    <div class="wrap">
      <div class="video"></div>
      <button class="play">Play</button>
    </div>
    <button class="exit" type="button">Exit</button>
  </div>
  <div class="curtain">
    <div class="wrap">
      <div class="video"></div>
      <button class="play">Play</button>
    </div>
    <button class="exit" type="button">Exit</button>
  </div>
  <div class="curtain">
    <div class="wrap">
      <div class="video"></div>
      <button class="play">Play</button>
    </div>
    <button class="exit" type="button">Exit</button>
  </div>
</div>

CSS #

.curtain {
  border: solid;
}
.play[disabled]::after {
  content: " - Now Playing";
}

JavaScript #

function addPlayerHandler(evt) {
  const play = evt.target;
  play.closest(".wrap").player = {};
  play.disabled = true;
}

function removePlayerHandler(evt) {
  const el = evt.target;
  const container = el.closest(".container");
  const wrapper = container.querySelector(".wrap");
  if (wrapper.player) {
    return removePlayer(wrapper);
  }
}

function removePlayer(wrapper) {
  wrapper.querySelector(".play").disabled = false;
  delete wrapper.player;
  console.log("removePlayer");
}

for (let curtain of document.querySelectorAll(".curtain")) {
  curtain.querySelector(".play").addEventListener('click', addPlayerHandler);
  curtain.querySelector(".exit").addEventListener('click', removePlayerHandler);
}

问题代码定位与修复 #

问题出在removePlayerHandler函数：原来的逻辑会获取最外层的.container，再用querySelector(".wrap")只返回第一个匹配的容器，导致所有Exit按钮都只能操作第一个播放器。修改后的函数如下：

function removePlayerHandler(evt) {
  const el = evt.target;
  // 先找到当前Exit按钮所属的curtain容器，再定位对应的wrap
  const curtain = el.closest(".curtain");
  const wrapper = curtain.querySelector(".wrap");
  if (wrapper.player) {
    return removePlayer(wrapper);
  }
}

修复说明 #

修改后，每次点击Exit按钮时，会先找到该按钮所在的.curtain父容器，再在这个容器内查找对应的.wrap元素，从而精准操作当前按钮对应的播放器，实现每个Exit按钮只移除自己对应的视频播放器的功能。

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