Cannot remove a div in Javascript

Question

I'm trying to remove a div in Javascript but 'its not working. I get no error in my console yet the function does get called.

I don't understand what I have done wrong, so I'm hoping someone can explain. This is how it works:

function menu_load(type){
  document.getElementById(type).onclick = function(){ menu_unload(type); }
  var width = 100;
  var height = 100;
  var d = document.createElement('div');
  d.id = 'menu';
  d.className = 'menu';
  d.style.width = width + 'px';
  d.style.height = height + 'px';
  document.getElementById('G').appendChild(d);
}

function menu_unload(type){
  alert('test'); //this displays
  var div = document.getElementById("menu");
  div.parentNode.removeChild(div); // doesn't remove the div
  document.getElementById(type).onclick = menu_load(type);
}

window.onload = function(){
  menu_load('test');
}

Is there any mistake here that I have missed? I just can't work out the problem.

you say "the function" does get called. Do you mean menu_unload or just menu_load? — Zach Lysobey
– Zach Lysobey, Commented Dec 16, 2012 at 2:26
both, it loads the div when I append and my alert displays for menu_unload with the onclick — Sir
– Sir, Commented Dec 16, 2012 at 2:27
put your alert call at the end of menu_unload and see if it still gets called — Igor
– Igor, Commented Dec 16, 2012 at 2:29
I created a jsfiddle with a smaller test case, and it works... maybe it'll help. jsfiddle.net/KcEKL — Zach Lysobey
– Zach Lysobey, Commented Dec 16, 2012 at 2:30
You should definitely use jQuery. It's really great and does all things. </sarcasm> — Tesserex
– Tesserex, Commented Dec 16, 2012 at 2:41

nnnnnn · Accepted Answer · 2012-12-16 02:36:16Z

5

Your code works for me if I correct the following line:

document.getElementById(type).onclick = menu_load(type);

Which incorrectly calls menu_load() and tries to assign the result to .onclick. It should be like you did in the other function

document.getElementById(type).onclick = function() { menu_load(type); };

Demo: http://jsfiddle.net/MCZza/

~~To be honest I don't know why this fixes it, since~~ your code wasn't actually a syntax error, but because it called menu_load() it recreated the div just removed. ~~and the .removeChild() line should happen first, but anyway...~~

answered Dec 16, 2012 at 2:36

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Paul S. Over a year ago

+1, but @ "I don't know why this fixes it", it is because calling menu_load is creating a new <div> which is exactly the same, so you can't tell the difference by eye.

nnnnnn Over a year ago

Ah, thanks @PaulS. - I didn't think it through even though I said "[this] calls menu_load()". I'll update my answer.

Igor Over a year ago

@PaulS. - thank you, man, you nailed it. You should put it as an answer.

Sir Over a year ago

Ah so it was doing it but immediately re-creating it ?

Paul S. Over a year ago

@Igor as much as I like reputation I don't think a new answer is warranted as this one covers the solution adequately.

|

Collectives™ on Stack Overflow

Cannot remove a div in Javascript

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related