removePlayer should remove the correct player, not just the first one-CodePudding

Clicking on each exit button should remove each video, but only one video is being removed. To reproduce, click on the 1st blue play button, next, click on the exit button. console.log("removePlayer"); says it is removed.

Do the same thing for the next video player. Click on the play button, then click on the exit, but nothing occurs unless the first video is playing.

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,
  );
}

.curtain {
  border: solid;
}

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

<div >
  <div >
    <div >
      <div ></div>
      <button >Play</button>
    </div>
    <button  type="button">Exit</button>
  </div>

  <div >
    <div >
      <div ></div>
      <button >Play</button>
    </div>
    <button  type="button">Exit</button>
  </div>

  <div >
    <div >
      <div ></div>
      <button >Play</button>
    </div>
    <button  type="button">Exit</button>
  </div>
</div>

This part of the code would need to be changed to something else. I think this part of the code needs to be changed to work properly.

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

CodePudding user response：

const container = el.closest(".container");
const wrapper = container.querySelector(".wrap");

Let's look again at your HTML:

<div >
  <div >
    <div >
      ...
    </div>
    <button  type="button">Exit</button>
  </div>

  <div >
    ...
    <button  type="button">Exit</button>
  </div>

  <div >
    ...
    <button  type="button">Exit</button>
</div>

Starting at a button, go up to the nearest .container, then go down to the first .wrap. What do you reach?

I think the problem's in this line:

const container = el.closest(".container");

Is going all the way up to .container correct, or is there a closer parent you could pick?

CodePudding user response：

The problem is that in const wrapper = container.querySelector(".wrap"); you are always getting the first .wrap element.

For the documentation:

The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. — MDN

One way to fix it could be:

Get the button clicked
Get the parent element of that clicked button that has wrap class
Do whatever you want with it (remove the video or whatever)