javascript - 根据对它的变量引用从 DOM 中删除一个元素？

Question

我正在动态创建div这样的：

var gameScoreDiv= document.createElement('div');
gameScoreDiv.innerHTML= 'Score: 0';
wrapperDiv.appendChild(gameScoreDiv);

稍后我需要div从 DOM 中删除它。我怎样才能摆脱它div？

是否可以简单地删除gameScoreDiv变量并让它也删除DOM元素（我感觉答案是否定的）？

Answer 1

2019 年更新

您现在可以使用ChildNode.remove()删除节点：

gameScoreDiv.remove()

每个主流浏览器都支持它，除了 IE（如果需要的话，你可以添加一个小的 polyfill），这并不奇怪。

---

你可以做：

gameScoreDiv.parentNode.removeChild(gameScoreDiv);

或者，如果您仍然参考wrapperDiv：

wrapperDiv.removeChild(gameScoreDiv);

在 jQuery 中它将是：

$(gameScoreDiv).remove();

但这将使用该parentNode方式，请参阅源代码。

Answer 2

你正在寻找removeChild方法。

在你的情况下，我看到这wrapperDiv是父元素，所以只需调用它：

wrapperDiv.removeChild(gameScoreDiv);

或者，在另一个不可用的范围内，parentNode用于查找父级：

gameScoreDiv.parentNode.removeChild(gameScoreDiv);

Answer 3

您可以给动态创建的 div 一个 id，稍后您可以查看是否存在具有此 id 的任何元素，将其删除。IE

    var gameScoreDiv= document.createElement('div');
    gameScoreDiv.setAttribute("id","divGameScore");
    gameScoreDiv.innerHTML= 'Score: 0';
    wrapperDiv.appendChild(gameScoreDiv);

然后：

    var gameScoreDiv= document.getElementById('divGameScore');
     wrapperDiv.removeChild(gameScoreDiv);

Answer 4

你可以试试这个：

gameScoreDiv.id = "someID";

//Remove the div like this:
var element = document.getElementById('someID');
element.parentNode.removeChild(element);