www.webdeveloper.com
Results 1 to 10 of 10

Thread: removeChild - null variable

  1. #1
    Join Date
    Jan 2008
    Posts
    20

    removeChild - null variable

    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!

  2. #2
    Join Date
    Jun 2007
    Posts
    667
    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?

  3. #3
    Join Date
    Jan 2008
    Posts
    20
    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!

  4. #4
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774
    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?

  5. #5
    Join Date
    Jan 2008
    Posts
    20
    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!

  6. #6
    Join Date
    Jun 2007
    Posts
    667
    Quote Originally Posted by filmend View Post
    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?

  7. #7
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774
    Quote Originally Posted by filmend View Post
    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.

  8. #8
    Join Date
    Jan 2008
    Posts
    20
    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.

  9. #9
    Join Date
    Jun 2007
    Posts
    667
    Quote Originally Posted by filmend View Post
    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.

  10. #10
    Join Date
    Jan 2008
    Posts
    20
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles