html 元素变为空

Question

我正在制作国际象棋游戏，我想使用拖放移动棋子。

document.addEventListener("drop", function(event) {
  if (event.target.className == "square") {
    //remove the piece from the original square
    dragged.parentElement.removeChild(dragged);
    //add the piece to the new square
    event.target.appendChild(dragged);
  }
  if (event.target.className == "piece") {
    //remove the piece from the original square
    dragged.parentElement.removeChild(dragged);
    //remove the piece of the new square
    event.target.parentElement.removeChild(event.target);
    //add the piece to the new square
    event.target.parentElement.appendChild(dragged);
  }
})

如果棋子移动的方格为空，则事件目标为方格元素。
如果方格被其他棋子占据，则事件目标是那个棋子。
第一个 if 语句工作正常，但第二个 if 出现问题，当我将棋子添加到新方块时，event.target.parentElement 变为空，从而引发此错误：

无法读取 null 的属性（读取 'appendChild'）。

你能帮我解决这个问题吗？谢谢

Answer 1

执行 event.target.parentElement.removeChild(event.target); 后，目标元素不再是子元素，因此它没有父元素。

将父元素保存在一个变量中，以便您可以再次引用它。

document.addEventListener("drop", function(event) {
  if (event.target.className == "square") {
    //remove the piece from the original square
    dragged.parentElement.removeChild(dragged);
    //add the piece to the new square
    event.target.appendChild(dragged);
  }
  if (event.target.className == "piece") {
    //remove the piece from the original square
    dragged.parentElement.removeChild(dragged);
    let parent = event.target.parentElement;
    //remove the piece of the new square
    parent.removeChild(event.target);
    //add the piece to the new square
    parent.appendChild(dragged);
  }
})

Answer 2

event.target.parentElement.removeChild(event.target);

完全删除“event.target”的存在...

解决方案

如果您使用一些以文本形式存储的数据来表示每一个片段

然后您可以将该数据设置为“”，而不是删除子项

或

你只需在新的正方形上覆盖

..如果问题没有解决Post更多你的代码在哪里会更容易理解

html 元素变为空

an html element become null

javascript

html

chess