我假设您的事件侦听器都绑定到box元素，并且在您添加它之后不会在box2上注册。要操作您的盒子，您实际上不需要ID，您只需要存储对您创建的最后一个盒子的引用。在我的例子中，我仍然设置了ID，因为这是你的问题的一部分。每当在键盘上键入“n”时，一个可能的旧框的ID将被设置为空白（您可能希望使用removeAttribute()完全删除ID），一个具有给定“#box”ID的新元素将被创建，然后可以通过光标移动。

let box;

function newBox() {
  if (box) {
    box.style.border = "none";
    box.id = ""
  }
  let box2 = document.createElement("div");
  box2.classList.add("box");
  document.body.appendChild(box2);
  box2.id = "box";
  box = box2;
}

function moveBox(x,y) {
  if (box) {
    box.style.top = parseFloat(box.style.top || 0) + y + 'px'; 
    box.style.left = parseFloat(box.style.left || 0) + x + 'px'; 
  }
}

document.onkeydown=function(event) {
  switch (event.key.toLowerCase()) {
    case 'n':
      newBox();  
      break;
    case 'arrowleft':
      moveBox(-1, 0);
      break;
    case 'arrowright':
      moveBox(1, 0);
      break;      
    case 'arrowdown':
      moveBox(0, 1);
      break;
    case 'arrowup':
      moveBox(0, -1);
      break;      
  }
}

body {
  font: 14px Calibri, sans-serif, normal;
}
#box {
  background-color: red;
}
.box {
  border: 2px solid green;
  position: absolute;
  background-color: blue;
  width: 50px;
  height: 50px;
}

Type "n" to create a new box and to move it.

不要使用**“ID”，而应使用“Class”。此外，您可以使用JS为“Box”元素创建一个“Object / Template”，以帮助区分box元素的新示例。为您的box“Object”创建一个“Method”，在创建新示例时，它会在其中删除事件侦听器。您可以将这些Object示例存储在“Array”中，以便于“索引”**。

• 希望这不会令人困惑。我试着给予你一些关键词，我相信这些关键词会帮助你走上正确的方向。

MDN - Remove Event Listener

class Box {
  constructor(height, width, color, posX, posY) {
    this.height = height;
    this.width = width;
    this.color = color;
    this.posX = posX;
    this.posY = posY;
  }
}

let arr = [];

function newBox() {
  let box = new Box(10, 10, 'blue', 50, 50);
  arr.push(box);
  console.log(arr);
}

<button onclick="newBox()">
Box Gen
</button>