JS调用removeChild报参数非Node类型错误，排除选字符串问题如何解决？

核心错误原因 #

你传入removeChild、appendChild方法的参数确实是字符串类型，不符合这两个方法要求传入DOM Node节点对象的规则，和你查到的通用报错原因是匹配的：

• 你代码中chosen = e.target.id这行，id属性返回的是元素id对应的字符串，不是DOM节点本身
• 你此前把chosen声明为空字符串的调整是错误方向，chosen需要存储的是DOM节点对象，而非字符串

另外你现有代码还存在一个笔误：discs.forEach(choices => choice.addEventListener(...) 里循环参数名是choices，实际调用的时候写成了choice，参数不匹配也会导致事件绑定失效。

修复后的可运行代码 #

const container = document.querySelector(".container")
const towerOne = document.querySelector("#towerOne")
const discs = document.querySelectorAll(".disc")

let chosen

// 修正参数名不一致问题
discs.forEach(choice => choice.addEventListener("click", (e) => {
    // 直接存储点击的DOM节点，而非id字符串
    chosen = e.target
    towerOne.removeChild(chosen)
    container.appendChild(chosen)
}))

可选优化 #

如果存在disc节点不在towerOne中的场景，可以加一层父节点判断，避免移除非子节点时报错：

discs.forEach(choice => choice.addEventListener("click", (e) => {
    chosen = e.target
    if (chosen.parentElement === towerOne) {
      towerOne.removeChild(chosen)
      container.appendChild(chosen)
    }
}))

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