Click on the first play button, then click the exit button. Next, Click any of the first 4 videos, then click the exit button that is at the bottom, the video does not get removed.
Clicking on the 1st play button removes player, clicking on any of the next 4 videos, then clicking the exit button which is at the bottom, does not remove video.
How would this be fixed in the code so that clicking any of those 4 videos, then clicking the exit will remove the video?
code https://jsfiddle.net/4j6h51y2/
What seems to be the issue, and how would this be fixed?
How would it be fixed in the code so that any of those 4 videos can be removed the one exit2 class button?
`<div class="curtain remove">`
`<button class="exit exit2" type="button" aria-label="Open"></button>`
function removePlayerHandler(evt) {
const el = evt.target;
const container = el.closest(".remove");
const wrapper = container.querySelectorAll(".wrap");
wrapper.forEach(function(wrapper) {
if (wrapper.player) {
removePlayer(wrapper);
}
});
}
(function showContainer3() {
function hide(el) {
el.classList.add("hide");
}
function show(el) {
el.classList.remove("hide");
}
function exitClickHandler() {
const thewrap = document.querySelector(".container3");
show(thewrap);
const cover = document.querySelector(".container2");
hide(cover);
}
const cover = document.querySelector(".exit2");
cover.addEventListener("click", exitClickHandler);
})();
function addExitHandlers(callback) {
const resetVideo = document.querySelectorAll(".exit");
resetVideo.forEach(function resetVideoHandler(video) {
video.addEventListener("click", callback);
});
}
function init() {
findPlayers();
const exitButtons = document.querySelectorAll(".exit");
addClickToExit(exitButtons);
}
return {
addExitHandlers,
getWrapper,
init
};
}());