javascript - 我必须点击两次，为什么？ (JavaScript onclick 事件处理程序)

Question

我是 JavaScript 和网络开发的新手，这是我第一次看到这种错误。这是一个非常基本的例子，我有两个 div——左边和右边——左边有五个图像，右边一个是空的，我还有两个按钮复制和删除，每个按钮都有一个 onclick 事件处理程序。复制按钮复制整个左侧节点 (div) 并将其附加到右侧 div ，删除按钮应该删除右侧 div 中的最后一个图像，它确实如此，问题是我必须在删除按钮上单击两次才能删除一个图像所以我必须点击 10 次才能删除整个集合。为什么会这样？我应该怎么做才能使删除按钮只需单击一次即可删除图像？

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

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>

Answer 1

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

试试这个:

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