只用纯js实现在一个盒子内点击创建一个新的圆点在点击创建一个新的旧的保留

以下是一个简单的纯js实现，可以在一个盒子内创建新的圆点，并保留旧的：

HTML代码：

<div id="container"></div>

CSS代码：

#container {
  width: 500px;
  height: 500px;
  border: 1px solid #000;
  position: relative;
}

.circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
}

JavaScript代码：

var container = document.getElementById("container");
var circles = [];

container.addEventListener("click", function(event) {
  var circle = document.createElement("div");
  circle.className = "circle";
  circle.style.left = event.pageX - container.offsetLeft + "px";
  circle.style.top = event.pageY - container.offsetTop + "px";
  container.appendChild(circle);
  circles.push(circle);
});

function clearCircles() {
  for (var i = 0; i < circles.length; i++) {
    container.removeChild(circles[i]);
  }
  circles = [];
}

以上代码实现了在点击容器时创建新的圆点，并将其添加到容器中。同时，将每个圆点的引用存储在一个数组中，以便稍后可以使用它们。

如果需要清除所有圆点，可以使用clearCircles函数。此函数将删除容器中的所有圆点，并清除圆点数组。