时间戳

首页 > 解决方案 > 为什么单击按钮时相关节点的子节点不会删除？

javascript - 为什么单击按钮时相关节点的子节点不会删除？

问题描述

我目前正在做我的家庭作业。我需要使用带有 javascript 的按钮从列表中删除“ol”。

我尝试为所有孩子使用一个 div，为每个孩子使用一个 div，但似乎不起作用。

这是我的脚本：

window.onload = function() {
    const parent = document.querySelector('ul');
}
function supprime() {
    parent.removeChild(parent.lastElementChild);
}

和我的html...

<ul>
    <ol>Item</ol>
    <ol>Item</ol>
    <ol>Item</ol>
    <ol>Item</ol>
</ul>
<button onclick='supprime()'>DELETE</button>

控制台日志没有显示任何错误。

标签： javascript

解决方案

因为parent是用 声明的const，所以它的作用域是附加到 的匿名函数onload。在supprime函数的上下文中，typeof parent === 'undefined'。

一种解决方法是将声明移到parent两个函数之外并使用let. （见詹姆斯的回答。）

另一个解决办法是搬进const parent = document.querySelector('ul')去supprime。

window.onload = function() {
  // This `parent` won't be used in `supprime`, because `const` scopes it to this function.
  const parent = 'nothing';
}

function supprime() {
  const parent = document.querySelector('ul');
  parent.removeChild(parent.lastElementChild);
}
<ul>
    <ol>Item</ol>
    <ol>Item</ol>
    <ol>Item</ol>
    <ol>Item</ol>
</ul>
<button onclick='supprime()'>DELETE</button>

推荐阅读