title: Removing the last child node DOM
body: <p>I'm trying to create a page with two different sides, and to that end I have set up in two different divs with IDs of <code>leftSide</code> and <code>rightSide</code>.</p>
  
  <p>Firstly, I add an image node to <code>leftSide</code> five times.</p>
  
  <p>Then, I clone <code>leftSide</code> to the <code>rightSide</code> div, and I want to remove the last image from <code>rightSide</code> so that, in total, I have five images on the left and four images on the right.</p>
  
  <p>However, my code just deletes all five images on the left side, not just the last one:</p>
  
  <pre><code>function createSmile() {
  
      for (var i = 0; i &lt; 5; i++) {
          var newImg = document.createElement("img");
          newImg.src = "smile.png";
          var imgPart = document.getElementById("leftSide");
          imgPart.appendChild(newImg);
      }
  
      document.getElementById("rightSide").appendChild(document.getElementById("leftSide").cloneNode(true));
  
      document.getElementById("rightSide").removeChild(document.getElementById("rightSide").lastChild);
  }
  </code></pre>