Question

为什么我的按钮需要点击两次以触发onclick事件？还有一些其他线程在stackoverflow上有同样的问题，但在我发现的所有线程中，原始海报将事件处理程序放在函数中。与我的代码不一样。

HTML

<body>
    <ul id="parentList">
        <li>First child</li>
        <li>Second child</li>
        <li>Third child</li>
        <li>Forth child</li>
        <li>Fifth child</li>
    </ul>
    <button type="button" id="delete">Delete first child</button>
</body>

脚本：

var parentList = document.getElementById("parentList");
document.getElementById("delete").onclick = function() {
    parentList.removeChild(parentList.firstChild);
};

示范：onclick-error

Answer 1

第一个＆＃34;元素＆＃34;在parentList中是空格。您可以通过控制台在事件侦听器中记录元素来看到这一点。

因此，您只需要过滤掉父项目中的li元素。

document.getElementById("delete").onclick = function() {
    var listItems = document.querySelectorAll("#parentList > li");

    if (listItems.length > 0) {
        listItems[0].remove();
    }
};

https://jsfiddle.net/ofLvac32/13/

您还可以使用parentList.firstElementChild 代替 parentList.firstChild，它会过滤掉任何无效的节点（空白）。

此

的一个示例

var parentList = document.getElementById("parentList");

document.getElementById("delete").onclick = function() {
    parentList.removeChild(parentList.firstElementChild);
};

https://jsfiddle.net/ofLvac32/37/

Answer 2

按钮上的点击处理程序没有任何问题。问题在于你移除第一个孩子的方式。如果您将这个小改动添加到您的函数中：

var parentList = document.getElementById("parentList");
    document.getElementById("delete").onclick = function() {
    console.log(parentList.removeChild(parentList.firstChild));
};

您会注意到第一次单击会使用换行符注销一些空格。这似乎是一个空文本节点。第二次点击会删除第一个<li>，依此类推......

Answer 3

使用elementChild，您会找到任何子项，包括空格。

您可以使用parentList.firstElementChild来获取第一个子元素。

Answer 4

正如您在下面的代码片段中看到的那样，第一个子元素是新行和空格的字符串：

function loaded(){
  document.getElementById("parentList");
  var firstChild = parentList.firstChild;
  console.log("First child: \"" + firstChild.data + "\"");
}

<body onload="javascript:loaded()">
	<ul id="parentList">
		<li>First child</li>
		<li>Second child</li>
		<li>Third child</li>
		<li>Forth child</li>
		<li>Fifth child</li>
	</ul>
</body>

您可以使用firstElementChild属性来获取第一个子元素，例如：

var parentList = document.getElementById("parentList");
document.getElementById("delete").onclick = function() {  parentList.removeChild(parentList.firstElementChild);
};

<ul id="parentList">
    <li>First child</li>
    <li>Second child</li>
    <li>Third child</li>
    <li>Forth child</li>
    <li>Fifth child</li>
</ul>
<button type="button" id="delete">Delete first child</button>

javascript - 按钮需要单击两次才能触发onclick

4 个答案: