As a beginner in JavaScript and web development, I encountered a peculiar issue for the first time. In a simple example, I have two divs - left and right. The left div contains five images, while the right div is empty. There are two buttons - copy and delete, each with an onclick event handler. The Copy button copies the entire content of the left div and appends it to the right div. However, the delete button requires two clicks to remove a single image from the right div, making it necessary to click 10 times to delete the entire set. Why is this happening and what can I do to make the delete button remove an image with just one click?
Below is my complete code, tested on Microsoft Edge and Google Chrome, with the same result.
var theLeftSide = document.getElementById("leftSide");
var theRightSide = document.getElementById("rightSide");
function Copy() {
copy = theLeftSide.cloneNode(true);
theRightSide.appendChild(copy);
}
function Delete() {
copy.removeChild(copy.lastChild);
}div {
position: absolute;
width: 670px;
height: 520px;
background: red
}
#rightSide {
position: absolute;
left: 670px;
border-left: 1px solid black;
background: black
}<input type="button" value="Copy" onclick="Copy()">
<input type="button" value="delete" id="btn" onclick="Delete()">
<div id="leftSide" style="width:400px">
<img src="smile.png" />
<img src="smile.png" />
<img src="smile.png" />
<img src="smile.png" />
<img src="smile.png" />
</div>
<div id="rightSide">
</div>