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函数的上下文中，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>

Answer 2

您要在函数function() { const parent = document.querySelector('ul'); }中声明一个变量，然后将其丢弃-该变量超出了函数supprime()的范围。阅读示波器。

对代码的这种修改将起作用-在两个函数都可以访问它的地方声明该变量，并在调用window.onload时对其进行修改：

let parent;

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

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

尽管列表为空时仍需要处理，否则按钮功能将引发错误。这样的事情会解决：

function supprime() {
    if(parent.children.length !== 0) {
        parent.removeChild(parent.lastElementChild);
    }
}

为什么单击按钮后相对节点的子代不会删除？

2 个答案: