尽管没有错误，但 RemoveChild 不起作用

Question

var disP = document.getElementById("display");
var num = 0;
document.getElementById("plus").addEventListener("click",function(){
    num++;
    var newDiv = document.createElement("div");
    var r = Math.round(Math.random() * 255);
    var g = Math.round(Math.random() * 255);
    var b = Math.round(Math.random() * 255);
    newDiv.style.backgroundColor = "rgb("+r+","+g+","+b+")";
    newDiv.id = "newDiv" + num;
    newDiv.style.width = 100 + "px";
    newDiv.style.height = 100 + "px";
    newDiv.style.position= "relative";
    newDiv.style.display = "inline-block";
    disP.appendChild(newDiv);
    

});

disP.addEventListener("click",function(){
    var newDiv = document.createElement("div");
    disP.appendChild(newDiv);
    disP.removeChild(newDiv);
    
});

#ctrl2 #plus {
    background-color:rgb(128,128,128);
    color:white;
}

<div id="preview">
</div>

<div id="ctrl2">
   <button id="plus" value="+" type="button">+</button> <span>|</span>
</div>

<div id=display></div>

你好，我正在尝试创建一个功能，我可以通过单击 div(box) 删除任何 individual div(box) 而不管顺序如何.我没有收到任何错误，但什么也没发生。我将不胜感激任何提示和帮助！

P.S 我们在学校被告知使用 "RemoveChild()" 来完成这项工作而不依赖其他方法，但我也愿意接受其他选择。

Answer 1

给 disP 监听器一个事件参数，这样你就可以识别事件的目标（被点击的方块），这样你就可以删除被点击的方块：

var disP = document.getElementById("display");
var num = 0;
document.getElementById("plus").addEventListener("click",function(){
    num++;
    var newDiv = document.createElement("div");
    var r = Math.round(Math.random() * 255);
    var g = Math.round(Math.random() * 255);
    var b = Math.round(Math.random() * 255);
    newDiv.style.backgroundColor = "rgb("+r+","+g+","+b+")";
    newDiv.id = "newDiv" + num;
    newDiv.style.width = 100 + "px";
    newDiv.style.height = 100 + "px";
    newDiv.style.position= "relative";
    newDiv.style.display = "inline-block";
    disP.appendChild(newDiv);
});

disP.addEventListener('click', e => {
  if (e.target !== disP) e.target.remove();
});

#ctrl2 #plus {
    background-color:rgb(128,128,128);
    color:white;
}

<div id="preview">
</div>

<div id="ctrl2">
   <button id="plus" value="+" type="button">+</button> <span>|</span>
</div>

<div id=display></div>

（.remove() 比 .removeChild 稍微简洁一点，但达到了同样的效果）

尽管没有错误，但 RemoveChild 不起作用

RemoveChild does not work despite there is no error

javascript

logic

removechild