title: Why does the onclick event listener gets removed?
body: <p>I am making a small matching game in javascript. Why does the onclick listener stop working after the first successful attempt. How do I rectify this issue.</p>
  
  <p>I am expecting the listener to be attached to the last child element of the div with id "leftSide" even after I refresh all nodes by removing old nodes first.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Matching Game&lt;/title&gt;
          &lt;style&gt;
              img {
                  position: absolute;
              }
  
              div {
                  position: absolute;
                  width: 500px;
                  height: 500px;
              }
  
              #rightSide {
                  left: 500px;
                  border-left: 1px solid black;
              }                    
          &lt;/style&gt;        
      &lt;/head&gt;
      &lt;body&gt;
          &lt;h2&gt;Matching Game&lt;/h2&gt;
          &lt;p&gt;Click on the extra smile on the left&lt;/p&gt;
          &lt;div id="leftSide"&gt;&lt;/div&gt;
          &lt;div id="rightSide"&gt;&lt;/div&gt;
          &lt;script&gt;
              var numberOfFaces = 5;
              var theLeftSide = document.getElementById("leftSide");
              var theRightSide = document.getElementById("rightSide");
  
              function generateFaces() {
                  for (var i=0; i&lt;=numberOfFaces; i++) {
                      new_img = document.createElement("img");
                      new_img.src="smile.png";
                      new_img.style.top=String(Math.floor(Math.random()*400))+"px";
                      new_img.style.left=String(Math.floor(Math.random()*400))+"px";
                      theLeftSide.appendChild(new_img);                    
                  }
  
                  // Clone all images to right side
                  leftSideImages = theLeftSide.cloneNode(true);
                  leftSideImages.removeChild(leftSideImages.lastChild);
                  theRightSide.appendChild(leftSideImages);
              }
  
              generateFaces()
  
              var theBody = document.getElementsByTagName("body")[0];
  
              theBody.onclick = function gameOver() {
                  alert("Game Over!");
  
                  theBody.onclick = null;
                  theLeftSide.lastChild.onclick = null;
              };
  
              theLeftSide.lastChild.onclick = function nextLevel(event) {
                  // remove child nodes
                  while (theLeftSide.firstChild) {
                      theLeftSide.removeChild(theLeftSide.firstChild);
                  }
  
                  while (theRightSide.firstChild) {
                      theRightSide.removeChild(theRightSide.firstChild);
                  }
  
                  // new nodes
                  event.stopPropagation();
                  numberOfFaces += 5;
                  generateFaces();
              };
  
  
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>