JavaScript调用removeChild报is not a function错误，如何从父塔移除子圆盘

• 核心报错根因：你代码中的chosenTower、chosenDisc存储的是元素的id字符串，并非DOM节点对象，而removeChild()是DOM节点专属的实例方法，字符串类型不存在该方法，因此触发removeChild is not a function报错。
• 同时代码存在多个隐含逻辑问题：
  • 遍历对象是disks集合，但事件绑定的主体choices是未定义变量，事件绑定逻辑不生效
  • 直接使用container变量，但没有提前获取对应DOM节点，后续执行appendChild也会触发未定义报错

你可以直接存储DOM节点对象而非id字符串，同时补全DOM节点获取逻辑、修正事件绑定主体，修复后代码如下：

// 提前获取所有圆盘、目标容器的DOM节点
const disks = document.querySelectorAll('.disk')
const container = document.querySelector('.container')
let chosenDisc
let chosenTower

disks.forEach((choice) =>
  // 给当前遍历到的圆盘绑定点击事件
  choice.addEventListener("click", (e) => {
    // 直接存储DOM节点对象，而非id字符串
    chosenDisc  = e.target
    chosenTower = e.target.parentElement
    console.log(chosenDisc.id, " is in ", chosenTower.id)
    chosenTower.removeChild(chosenDisc)
    container.appendChild(chosenDisc)
  })
)

如果需要保留id存储的逻辑，也可以在调用节点方法前，通过document.getElementById(字符串id)将id转为DOM节点对象再操作，但直接存储节点对象的执行效率更高。

内容的提问来源于stack exchange，提问作者user16910942