How to Clone images but delete last child?

Question

I want to clone images of the leftSide div to the rightSide div. But I do have to delete the last child of the leftSide div element. On page load my leftSide div should have 5 faces and the rightSide div should have 4 images. How can I achieve this result? If I try to remove the lastChild from the rightSide div the faces disappears from the div. I want to do this with javascrip.

Here's my code:

    function generateFaces(){
        var theLeftSide = document.getElementById("leftSide");  
        var width = 500, height = 500;
        var top_position = 0, left_position = 0,
        numberOfFaces = 5;
            for (var i = 0; i < 5; i++) {
            createElement(i);   
            numberOfFaces += 5;
        }
        var theRightSide = document.getElementById("rightSide");
        leftSideImages = theLeftSide.cloneNode(true);
        document.getElementById("rightSide").appendChild(leftSideImages);
        theRightSide.removeChild(theRightSide.lastChild);
        function createElement() {
            var image = document.createElement('img');
            image.src = "smile.png";
            image.style.position = 'absolute';
            image.style.top = top_position + "px";
            image.style.left = left_position + "px";
            theLeftSide.appendChild(image);
            top_position = Math.random() *   400 ;
            left_position = Math.random() *  400 ;  
        }
    };

Answer 1

Delete the last child of leftSideImages instead, that is where the images are. theRightSide last child is leftSideImages which contains all the images.

leftSideImages.removeChild(leftSideImages.lastChild);