我必须点击两次，为什么？说明：JavaScript onhtml事件处理程序

Question

这是一个非常基本的例子，我有两个部分-左边和右边-左边有五个图像，右边是空的，我有复制按钮复制整个左节点（div）并将其追加到右div，删除按钮应该删除右div中的最后一个图像，它确实如此，事情是i必须点击两次删除按钮删除一个图像，所以我必须点击10次删除整个设置。我应该怎么做，使删除按钮删除图像只需单击一次？

这是我的全部代码，在MicrosoftEdge和GoogleChrome上进行了测试，得到了相同的结果。

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
}

html lang-html prettyprint-override"><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>

Answer 1

您正在删除文本节点和元素。您真正想要的是复制。removeChild（copy.lastElementChild）

Answer 2

大多数浏览器在默认情况下在页面的每个元素之间插入一个空文本节点，您的代码为每个img删除一个空节点，这就是为什么它似乎有一半的时间可以工作的原因。

试试这个：

function Delete(){
  var imgs = document.querySelectorAll('.rightSide img');
  copy.removeChild(imgs[imgs.length-1]);
}