0

I have a following code:

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

This code is supposed to remove the DOM element, but it doesn't. So I removed the code and added a breakpoint in its stead and input the code in the console during the pause manually, and it worked (i.e. the element was successfully removed).

This behavior seems rather strange for me, so I wanted to ask, why does it happen and what can I do to inspect this peculiar issue?

Thanks in advance.

EDIT: Thanks for quick replies. Nonetheless, I want to make it perfectly clear that the element #overlay does exist at the time of the execution of the code. Moreover, when I put a debugging breakpoint at that place in the code and execute these two lines of code, it does have an effect on this particular existent element (which it doesn't without debugging).

EDIT 2: I was asked to clarify the code. I execute the following code before the body (part of the queryloader2 plugin, which ensures image preloading):

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

No errors present (except for a 404 error because of missing image, which has no impact on Javascript).

nakajuice
  • 561
  • 1
  • 8
  • 21
  • 5
    Most likely `#overlay` doesn't exist at the time you're executing the code. – Teemu Aug 25 '15 at 12:25
  • What @Teemu means is that the browser evaluates the HTML top to bottom. If your code appears at the start of the file, before the element with id "overlay" has been seen by the browser, then it won't work. – Pointy Aug 25 '15 at 12:29
  • @Teemu It does exist. And even if it doesn't, the behavior during the execution of the code and the behavior when execute the code at the same place during the breakpoint should not be different. – nakajuice Aug 25 '15 at 12:29
  • When exactly is this code run? If at parsing time, you might get weird results when adding/removing elements before `body` has been fully parsed. Notice, that Chrome Dev Tools are asynchronous. Do you see any errors in the console when you're running the code? – Teemu Aug 25 '15 at 12:31
  • @haemhweg you should execute that code _inside_ the `DOMContentLoaded` callback, it does not matter whether it is specified before or after `body` or the `#overlay` element, the DOM building is asynchronous. – Jozef Legény Aug 27 '15 at 08:18

2 Answers2

1

As Teemu mentioned #overlay more than likely doesn't exist when the code is run.

For a test.. Try wrapping your code in either of these...

Javscript

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

Jquery (if included)

$(document).ready(function () { /* your code*/ });
Hamish Hossack
  • 23
  • 4
0

You should execute your code after the DOM tree has finished loading. One option is to wrap your code in a function that executes after the DOMContentLoaded event has been fired.

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

Look at this answer for more information: $(document).ready equivalent without jQuery

Community
  • 1
  • 1
Jozef Legény
  • 1,138
  • 1
  • 11
  • 26