我最近开始接触javascript，我的html编码能力有些欠缺。话虽如此，我遇到了一些可以在 javascript 中找到的有趣的事情。由于 javascript 和 html 的紧密使用，我担心我已经造成了内存泄漏。
在这种情况下，我想创建自己的自定义 javascript 警报样式/确认框。我最终通过 javascript 有效地创建了一个 html 覆盖。做出选择后，我删除了该叠加层。
var output;
var createPromotionBox = function () {
var choice = '';
var b = document.getElementById('button-container');
var box = document.createElement('div');
box.setAttribute('id', 'alert-box');
box.setAttribute('class','alert');
b.appendChild(box);
var text = document.createElement('div');
text.setAttribute('class','alert-content');
text.setAttribute('id', 'alert-text');
text.innerHTML = 'Promote your pawn!<br>';
box.appendChild(text);
var arr = ['Q', 'N', 'R', 'B'];
for(var i in arr) (function(i){
var btn = document.createElement('button');
btn.setAttribute('class','promotion-button');
btn.setAttribute('id',arr[i]+'btn');
btn.innerHTML = arr[i];
btn.onclick = function () {
output = arr[i];
deletePromotionBox();
};
text.appendChild(btn);
})(i);
};
var deletePromotionBox = function () {
var arr = ['Q', 'N', 'R', 'B'];
for(var i in arr) {
removeElement(arr[i]+'btn');
}
removeElement('alert-text');
removeElement('alert-box');
};
var removeElement = function (elementId) {
var e = document.getElementById(elementId);
e.parentNode.removeChild(e);
};
document.getElementById('btn').onclick = createPromotionBox; <html>
<body > Amazing code works! <br><br>
<div class="button-box" id="button-container" style="width: 600px">
<button id="btn">Click Me!</button>
</div>
</body>
</html>我在创建b、box、text 和btn 时是否有泄漏？我删除了 html 元素，但变量引用现在已从它们的元素中孤立出来。
另外我想我在某处读到我不应该使用 remove()。还有其他方法吗？
最佳答案
这不应造成内存泄漏。
如果您删除元素并且对超出范围的引用，那么垃圾收集器应使用标记和清除算法清理它们。
您始终可以使用内存分析工具检查 Chrome 开发工具，请参阅 DevTools memory leak problems有关这方面的更多信息
关于javascript - 删除 JavaScript 中的 HTML 元素以避免内存泄漏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49147182/