I got = removeChild不是一个函数

Question

我试图将作为子磁盘的磁盘从作为父的塔中移除，但此消息出现"removeChild不是一个函数"。

let chosenDisc
let chosenTower
disks.forEach((choice) =>
choices.addEventListener("click", (e) => {
chosenDisc  = e.target.id
chosenTower = e.target.parentElement.id
console.log(chosenDisc, " is in ", chosenTower)
chosenTower.removeChild(chosenDisc)
container.appendChild(chosenDisc)
})
)

<article class="container"></article>
<section class="towers">
<div class="tower" id="towerOne">
<div class="disk" id="diskOne"></div>
<div class="disk" id="diskTwo"></div>
<div class="disk" id="diskThree"></div>
<div class="disk" id="diskFour"></div>
</div>
<div class="tower" id="torreTwo"></div>
<div class="tower" id="torreThree"></div>
</section>

Answer 1

我猜您只将事件侦听器附加到id为"disk*"的元素上。

选择这些元素的id，以及它们的父元素的id。ID没有removeChild方法，但是这个方法在元素本身上。为了使你的代码工作，你应该这样修改:

let chosenDisc
let chosenTower
disks.forEach((choice) => choices.addEventListener("click", (e) => {
chosenDisc = e.target 
chosenTower = e.target.parentElement
console.log(chosenDisc.id, " is in ", chosenTower.id)
chosenTower.removeChild(chosenDisc)
container.appendChild(chosenDisc)
}))

Answer 2

在forEach循环中，您将父元素的id分配给chosenTower。chosenTower不是一个节点，它只是一个字符串。

chosenTower = e.target.parentElement

可以解决这个问题。

Answer 3

removeChild和appendChild正在等待一个节点对象。你需要传递的是目标而不是目标。chosenDisc的id。

let chosenDisc;
let chosenTower;
disks.forEach((choice) =>
choices.addEventListener("click", (e) => {
chosenDisc  = e.target;
chosenTower = e.target.parentElement;
console.log(chosenDisc, " is in ", chosenTower)
chosenTower.removeChild(chosenDisc)
container.appendChild(chosenDisc)
})
)

<article class="container"></article>
<section class="towers">
<div class="tower" id="towerOne">
<div class="disk" id="diskOne"></div>
<div class="disk" id="diskTwo"></div>
<div class="disk" id="diskThree"></div>
<div class="disk" id="diskFour"></div>
</div>
<div class="tower" id="torreTwo"></div>
<div class="tower" id="torreThree"></div>
</section>