Cannot read properties of undefined (reading 'destroy')

Question

How is this fixed in the code? https://jsfiddle.net/a6dp1soy/

To reproduce error, click on the X Button

First click on the play svg, then the X button.

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

Answer 1

One solution could be just replacing

video.parentElement.player.destroy();

with

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

I took reference from here How to remove the parent element using plain Javascript and video.parentElement object

And then next part shall be creating that element again on clicking play

Answer 2

You should find the element with class wrap where your player is stored on creation.

  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 fiddle: https://jsfiddle.net/c54b0faw/