我必须点击两次，为什么？ （JavaScript onclick事件处理程序）

Question

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

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

＆＃13;

＆＃13;

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);
}

＆＃13;

div {
  position: absolute;
  width: 670px;
  height: 520px;
  background: red
}
#rightSide {
  position: absolute;
  left: 670px;
  border-left: 1px solid black;
  background: black
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

试试这个：

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

Answer 2

您正在删除文本节点和元素。你真正想要的是copy.removeChild(copy.lastElementChild);