Question

我有以下代码：

var e = document.getElementById("overlay");
e.parentNode.removeChild(e);

这段代码应该删除DOM元素，但事实并非如此。所以我删除了代码并添加了一个断点，并在暂停期间手动输入控制台中的代码，并且它工作正常（即元素已成功删除）。

这种行为对我来说似乎很奇怪，所以我想问一下，为什么会发生这种情况，我该怎么做才能检查这个奇怪的问题呢？

提前致谢。

编辑：感谢您快速回复。尽管如此，我想非常清楚地表明元素#overlay在执行代码时确实存在。此外，当我在代码中的那个地方放置一个调试断点并执行这两行代码时，它确实对这个特定的存在元素产生了影响（没有调试它就没有了。）

编辑2：我被要求澄清代码。我在body（ queryloader2 插件的一部分，确保图像预加载）之前执行以下代码：

window.addEventListener('DOMContentLoaded', function() {
    new QueryLoader2(document.querySelector("body"), {});
});

不存在任何错误（由于缺少图像而导致404错误，但对Javascript没有影响）。

Answer 1

正如Teemu提到的那样#overlay在代码运行时很可能不存在。

对于测试..尝试将代码包装在其中任何一个......

Javscript

window.onload = function () { /*your code*/ };

Jquery（如果包含）

$(document).ready(function () { /* your code*/ });

Answer 2

您应该在DOM树加载完成后执行代码。一种选择是将代码包装在一个在触发DOMContentLoaded事件后执行的函数中。

document.addEventListener("DOMContentLoaded", function(event) { 
  // your code
});