Menu
Trying to remove the last child of the "leftSideImages" so that the right side has one less the the images on the left. Below is my code. The goal is to clone the images on the left onto the right minus one. Thank you!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Matching Game</title>
<style>
div {
position: absolute;
width: 500px;
height: 500px
}
img {
position: absolute
}
#rightSide {
left: 500px;
border-left: 1px solid black
}
</style>
<script>
function generateFaces(){
var numberOfFaces = 5;
var theLeftSide = document.getElementById("leftSide");
var theRightSide = document.getElementById("rightSide");
for ( var i = 0; i< numberOfFaces; i++){
var random_top = Math.floor(Math.random() * 400);
var random_left = Math.floor(Math.random() * 400);
var img = document.createElement("img");
img.src="smile.png";
img.style.top = random_top + "px";
img.style.left = random_left + "px";
theLeftSide.appendChild(img);
}
var leftSideImages = theLeftSide.cloneNode(true);
//this doesn't work leftSideImages.removeChild(theLeftSide.lastChild);
// it gets rid of everything.
// I'm trying to clone the left side onto the right with one less image
theRightSide.appendChild(leftSideImages);
}
</script>
</head>
<body>
<h3>Matching Game</h3>
<p>Click on the extra smiling face on the left.</p>
<div id="leftSide"></div>
<div id="rightSide"></div>
<script>generateFaces()</script>
</body>
</html>
754
You need to use removeChild and lastElementChild, like this :
var parent = document.getElementById("leftSide");
parent.removeChild(parent.lastElementChild);<div id="leftSide">
<div>1</div>
<div>2</div>
<div>3</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
