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

【问题标题】：i have to click twice, why? (JavaScript onclick event handler)我必须点击两次，为什么？（JavaScript onclick 事件处理程序）
【发布时间】：2015-12-04 18:17:51
【问题描述】：

我是 JavaScript 和 Web 开发的新手，这是我第一次看到这种错误。这是一个非常基本的示例，我有两个 div-left 和 right-左侧有五个图像，右侧是空的，我还有两个按钮复制和删除，每个按钮都有一个 onclick 事件处理程序。 Copy 按钮复制整个左侧节点（div）并将其附加到右侧 div 中，删除按钮应该删除右侧 div 中的最后一个图像，它确实如此，问题是我必须在 Delete 按钮上单击两次才能删除一个图像所以我必须点击 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>

【问题讨论】：

ID 必须是唯一的，并且当您克隆 div 时会复制 ID。此外，您的图像之间的空白也算作一个孩子。
一些建议 - 首先声明复制变量，否则'use-strict'会抛出错误，这是一个不好的做法。关注 j08691 的评论。所以不要只是克隆，而是一张一张地复制图像或将其封装在另一个没有 id 的 div 中。 L. Catallo 的回答也有点正确，选择子节点然后删除它。另外请在加载页面后告诉我们，这个“两次点击”问题是第一次还是每次都发生？

标签： javascript html css

【解决方案1】：

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

试试这个：

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

【讨论】：

【解决方案2】：

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

【讨论】：

我还建议将var copy 放在该脚本的顶部。 copy 是 Chrome 中的一个实际函数。