removeChild - null variable

**filmend** · 06-08-2009, 11:50 AM

Hi all,
I'm trying to remove a div using JavaScript. I've noticed that the best way to do this is to use the parentNode of the element we want to manipulate.
Here's the basic code:

Code:

var cont1 = document.getElementById('MSG_cont1');
cont1.parentNode.removeChild(cont1);

The #MSG_cont1 div **IS** removed successfully, and that element ID does exist before removal (I checked it before and after, using the DOM inspector). Nonetheless, I get a "cont1 is null" message on the Error Console, after running this code. Why is that? By the way, the parentNode is the <BODY> element.
Cheers!

**Sterling Isfine** · 06-08-2009, 02:19 PM

What does the alert show if you do this?

Code:

var cont1 = document.getElementById('MSG_cont1');
alert( cont1 );
cont1.parentNode.removeChild(cont1);

Do you have a URL?

**filmend** · 06-09-2009, 10:05 AM

Hey Sterling,

It shows '[object HTMLDivElement]'... Now I'm lost.
Here's how the div is being created:

Code:

var parentElem = document.getElementById('doc_body');
var new_div = document.createElement('div');
new_div.setAttribute('id','MSG_cont1');
parentElem.appendChild(new_div);

I don't have the page online, sorry.
Cheers!

**toicontien** · 06-09-2009, 12:28 PM

Maybe try this?

Code:

var cont1 = document.getElementById('MSG_cont1');
var parent = cont1.parentNode;
parent.removeChild(cont1);

That way the cont1 variable isn't being used in the same statement that destroys a reference to it?

**filmend** · 06-10-2009, 06:33 AM

Code:

var cont1 = document.getElementById('MSG_cont1');
var parent = cont1.parentNode;
parent.removeChild(cont1);

When executing the second line, it says that 'cont1' is null. I'm pretty sure that 'MSG_cont1' exists... Cheers!

**Sterling Isfine** · 06-10-2009, 07:44 AM

Originally Posted by filmend

Code:

var cont1 = document.getElementById('MSG_cont1');
var parent = cont1.parentNode;
parent.removeChild(cont1);

When executing the second line, it says that 'cont1' is null. I'm pretty sure that 'MSG_cont1' exists... Cheers!

parent is a property of window so best not overwritten.

Why don't you just host an example page that displays the problem?

**toicontien** · 06-10-2009, 09:08 AM

Originally Posted by filmend

When executing the second line, it says that 'cont1' is null. I'm pretty sure that 'MSG_cont1' exists... Cheers!

Are you "pretty sure" or do you "absolutely know"? When this line is called during the process of rendering the page can also make a difference.

**filmend** · 06-10-2009, 11:24 AM

Hi,

Are you "pretty sure" or do you "absolutely know"? When this line is called during the process of rendering the page can also make a difference.

I absolutely know.

I managed to host the page and the entire js code at http://filmen.planetaclix.pt/test.
Both DIVs to be removed ('MSG_cont1' and 'MSG_cont2') are also generated through JS using the 'toggleMsg' function.
Thanks for your inputs.

**Sterling Isfine** · 06-10-2009, 11:44 AM

Originally Posted by filmend

Hi,

I absolutely know.

I managed to host the page and the entire js code at http://filmen.planetaclix.pt/test.
Both DIVs to be removed ('MSG_cont1' and 'MSG_cont2') are also generated through JS using the 'toggleMsg' function.
Thanks for your inputs.

You have nested divs with the same onclick handler applied to them, which means there will be multiple attempts to remove the same element.

**filmend** · 06-10-2009, 11:58 AM

Yep, that was it. I applied the handler to different divs assuming that only one of them in the stack would actually be 'clickable'. Now it works perfectly.

Cheers!

Thread: removeChild - null variable

Thread Tools

Display

removeChild - null variable

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions