为什么我的按钮需要单击两次才能触发 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>
Script:
var parentList = document.getElementById("parentList");
document.getElementById("delete").onclick = function() {
parentList.removeChild(parentList.firstChild);
};
示范：点击错误 https://jsfiddle.net/morgianna1802/ofLvac32/1/
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/ 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/ https://jsfiddle.net/ofLvac32/37/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
