element.remove() and element.append() conflicting with each other - append

Question

I am writing a chess game in JavaScript/React.
When I drag the white piece to the black piece, I am trying to remove the black piece and append the white one, like this :
function drop(ev) {
ev.preventDefault();
//Set the background to original color on droping the piece:
ev.target.style.backgroundColor = ev.target.dataset.squarecolor
//Save moving piece data into an object:
let movingPiece = JSON.parse(ev.dataTransfer.getData("Text"))
if (movingPiece.color === 'white' && ev.target?.dataset?.color === 'black' && ev.target.nodeName === 'IMG')
{
ev.target.remove()
ev.target.append(document.getElementById(movingPiece.id));
}
}
So:
Remove black piece
Add white piece
But I end up with 0 pieces on the screen. Not sure if this is because of render or JS is removing the newly appended item.
Reproducible example:
https://codesandbox.io/s/chess-app-11qvk9?file=/src/components/pieces.jsx

Answer 1

No need to remove
function drop(ev) {
ev.preventDefault();
//Set the background to original color on droping the piece:
ev.target.style.backgroundColor = ev.target.dataset.squarecolor
//Save moving piece data into an object:
let movingPiece = JSON.parse(ev.dataTransfer.getData("Text"))
if (movingPiece.color === 'white')
{
//ev.target.remove()
ev.target.append(document.getElementById(movingPiece.id));
}
}