javascript - 为什么当我点击按钮时相关节点的子节点没有删除？

Question

我目前正在做作业。我需要使用带有 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>

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

Answer 1

因为 parent 是用 const 声明的，所以它的作用域是附加到 onload 的匿名函数。在 supprime 函数的上下文中，typeofparent === '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>