JS issues appending/ removing child (Argument 1 of Node.removeChild is not an object)

I'm trying to create a small puzzle game. When clicking on an image i want an overlay to appear which should either show a video (to give players hints) or create a div inside the overlay with an input (to enter a password which should unlock new options/videos if entered correctly).

When showing/hiding the overlay div a "TypeError: Argument 1 of Node.removeChild is not an object." on lines 17, 29 and 86 appears.

System: Windows 10 64bit/ Windows 8 32 Bit running Firefox(67.0.4). It will only ever run on one or two devices using a modern Firefox version.

I tried re-getting the overlay element (through document.getElementById) before trying to add/remove from it. And the objects i'm trying to remove should be getting checked by if statements featuring typeof.

Creating the overlay works, i'm just running into errors trying to close it.

I've tried different approaches for over 12h straight and i've decided on reworking it about 4h ago, after a long hot day. Please be kind if i overlooked something^^

Here are the more interesting parts.

//Variables
var overlay = document.getElementById("overlay");

//removes Overlay by adding "hidden" class.
function removeOverlay() {
  if (typeof(document.getElementById("curVid")) !== 'undefined') {
    overlay.removeChild(document.getElementById("curVid"));
  }
  if (typeof(document.getElementById("pwDiv")) !== 'undefined') {
    overlay.removeChild(document.getElementById("pwDiv"));
  }
  overlay.classList.add("hidden");
}

//shows overlay by removing "hidden" class. adds listener for clicks to remove Overlay.
function showOverlay() {
  overlay.classList.remove("hidden");
  overlay.addEventListener('click', function() {
    removeOverlay();
  });
}

//Play Video: receives int for video source. Creates a new Video with all its settings, 
//adds it to the overlay and calls showOverlay function.
function playVideo(id) {
  var vid = document.createElement('video');
  vid.src = getVideo(id);
  vid.id = "curVid";
  vid.autoplay = true;
  vid.controls = true;
  vid.onended = function() {
    overlay.removeChild(vid);
    removeOverlay();
  };
  overlay.appendChild(vid);
  showOverlay();
}


function createPWPromt(password) {
  console.log(password);
  var newsDiv = document.getElementById("news");

  var pwDiv = document.createElement('div');
  pwDiv.id = "pwDiv";
  overlay.appendChild(pwDiv);

  var pwInput = document.createElement('input');
  pwInput.id = "pwInput";
  pwDiv.appendChild(pwInput);

  var pwButton = document.createElement('button');
  pwButton.id = "pwButton";
  pwButton.innerHTML = "senden";
  pwButton.addEventListener('click', function() {
    if (pwInput.value.toLowerCase() == password) {
      var p = document.createElement('p');
      p.innerHTML = "hello world the password was correct!";
      newsDiv.appendChild('p');
      removeOverlay();
    } else {
      var p = document.createElement('p');
      p.innerHTML = "sorry the password was incorrect!";
      newsDiv.appendChild('p');
      removeOverlay();
    }
  });
  pwDiv.appendChild(pwButton);

  showOverlay();
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Rework</title>
  <link rel="stylesheet" type="text/css" href="video.css">

  <style>

  </style>
</head>

<body>
  <div id="news">
    <ul>
      <li>
        <p onclick="showOverlay()">Show Overlay!</p>
      </li>
      <li>
        <p onclick="playVideo(4)">Play Video 4!</p>
      </li>
      <li>
        <p onclick="createPWPromt('nudel')">create PW Promt!</p>
      </li>
    </ul>
  </div>
  <div id="youtuber">

  </div>
  <div id="overlay" class="hidden">

  </div>
  <script type="text/javascript" src="video.js"></script>
</body>

</html>

My Divs are all formatted with float:left; with the 2 for content being at 50% width while the third is positioned absolute at 100% width and height. It has a .hidden class (for display:none) which is added and removed through js to toggle visibility.

Solution

You'll get this error if you call removeOverlay() before you've added both the curVid and pwDiv elements. Your test for whether the elements are already there is incorrect. You test whether document.getElementById() returns undefined, but it returns null when the element is not found.

function removeOverlay() {
  var curVid = document.getElementById("curVid");
  if (curVid) {
    overlay.removeChild(curVid);
  }
  var pwDiv = document.getElementById("pwDiv");
  if (pwDiv) {
    overlay.removeChild(pwDiv);
  }
  overlay.classList.add("hidden");
}