Intenté eliminar el disco como elemento secundario de una torre como elemento principal, pero aparece este mensaje "removeChild is not a function".
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>Supongo que está adjuntando un detector de eventos solo a elementos que tienen una identificación como "disco *".
Está eligiendo la identificación de esos elementos y la identificación de su padre. El ID no tiene un método removeChild, pero ese método está en el propio elemento. Para que su código funcione, debe cambiarlo de la siguiente manera:
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) }))En el ciclo forEach, está asignando la identificación del elemento principal a la torre elegida. la torre elegida no es un nodo, es solo una cadena.
chosenTower = e.target.parentElementarreglaría esto.
removeChild y appendChild esperan un objeto de nodo. debe pasar el objetivo en lugar del chosenDisc para el disco elegido.
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>