javascript - 从另一个 div 中删除 div//remove() 似乎不起作用

Question

这个问题已经有答案了:

What do querySelectorAll and getElementsBy* methods return? (12 个回答)

已关闭 6 年前。

我已经实现了一个函数，它在另一个 div 中创建 div，并希望为用户提供一个选项，通过一个按钮删除所有这些 div，但我无法让它工作，我可能正在做一些 DOM 禁止的事情，所以我将不胜感激任何建议。这是我的代码:

    <p>Pick how many dice you want to roll:</p>
<input id="diceNumber" type="number" name="diceNumber" onchange="return addMoreDice()">


<button onclick="addDice()">Add Dice</button>

<div id="diceTable">
    
</div>

<button onclick="removeDice()">Reset</button>

和JS:

var numInput = document.querySelector("input");

function addDice(){
var div = document.createElement('div');
div.className = "diceStyle";

div.innerHTML = Math.floor((Math.random()*6)+1);

document.getElementById('diceTable').appendChild(div);
};

function addMoreDice(){
for(var i = 0; i < numInput.value; i++){
    addDice();
}
}

function removeDice(){
var removeDiv = document.getElementsByClassName("diceStyle");
removeDiv.remove();
}

我认为这将是一种“聪明”的方法，只需用一个按钮删除具有该类名称的所有元素，但我想这不是最好的主意。

编辑

我确实意识到问题之前已经解决了，但是我遇到了线程中提出的解决方案的问题，它在我的情况下不起作用，它只完成了一半的工作，我不明白为什么。

function removeDice(){
var removeDiv = document.getElementsByClassName("diceStyle");
for(var i=0; i < numInput.value; i++){
    removeDiv[i].remove();
}

}仅删除一半的 div。如果我使用removeDiv.lentgh进行迭代，它的工作原理完全相同

Answer 1

问题就在这里

var removeDiv = document.getElementsByClassName("diceStyle");
removeDiv.remove();

removeDiv 现在是数组。尝试使用

删除每个元素

for(var i = 0 ; i < removeDiv.length; i++) {removeDiv[i].remove();}