Question

很简单，我从javascript开始。我写下了“ removeChild”方法的示例，该示例具有通过按钮激活的简单功能。但是，我必须双击它才能使它工作。

我猜这可以使用JQuery来解决，但是我只想了解发生了什么，并尝试弄清对javascript的理解。

这是我的HTML：

function remove() {
  var parent = document.getElementById("demo");
  var child = parent.lastChild;
  parent.removeChild(child);
}

<div id="demo">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
</div>
<button onClick="remove()">Erase last</button>

Answer 1

lastChild包括文本节点。由于您在最后一个<p>之后有一个换行符，因此第一次单击实际上会删除换行符。随后的点击将删除<p>元素。

为了演示，请看以下示例，其中我只是从HTML中删除了换行符：

function remove() {
  var parent = document.getElementById("demo");
  var child = parent.lastChild;
  parent.removeChild(child);
}

<div id="demo"><p>Paragraph 1</p><p>Paragraph 2</p><p>Paragraph 3</p></div>
<button onClick="remove()">Erase last</button>

但是，从HTML中删除换行符并不是一个切实可行的解决方案！

相反，将lastChild替换为lastElementChild：

function remove() {
  var parent = document.getElementById("demo");
  var child = parent.lastElementChild;
  parent.removeChild(child);
}

<div id="demo">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
</div>
<button onClick="remove()">Erase last</button>

Answer 2

使用parent.childNodes可以找到div的所有子节点

NodeList(6) [text, p, text, p, text, p]

每两次单击可删除一个p元素。

不双击。