SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    clearing all childNodes

    Hi all, right now i'm using div.innerHTML = null to clear all Nodes. i was wondering if anyone has a "cleaner" solution that works just as effectively?

  2. #2
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    heys cool, im aware of that method however for my case i need to remove nodes within a populated div with about 200-500 nodes so i was abit worried about performance issues.

    will div.innerHTML = null be better than using a loop?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Pacerier View Post
    heys cool, im aware of that method however for my case i need to remove nodes within a populated div with about 200-500 nodes so i was abit worried about performance issues.

    will div.innerHTML = null be better than using a loop?
    Time it, in a realistic situation.

    You may find some differences depend on the type of browser but overall you'll find there should be no user-recognizable difference.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    div.replaceChild(div.cloneNode(false),div);

    If you use the innerHTML method, I'd rather see you set the value to the empty string-
    it doesn't amount to much, but it describes what you are doing better.

    You aren't removing the property.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by mrhoo View Post
    div.replaceChild(div.cloneNode(false),div);
    That's not going to work, because an element cannot be the reference from which it is removed.

    You'll need to use the parent of the element instead.

    Code javascript:
    div.parentNode.replaceChild(div.cloneNode(false), div);

    The code above says: from the parent, take an empty clone of the div, and use it to replace the div.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    pmw57 is correct, which reminds me that it is easy to make mistakes when you are typing code.
    It's better to test a script you are sure of than to have someone else find the errors...

  8. #8
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey thanks all for the help. but isn't it true that if i have event registers associated with the div, and i use the clone-node-replace method, those events will be lost?

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Pacerier View Post
    hey thanks all for the help. but isn't it true that if i have event registers associated with the div, and i use the clone-node-replace method, those events will be lost?
    Those events will be lost, so you should use the code that was first suggested by PhilipToop where you keep removing the first child node until there are none left.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pacerier View Post
    heys cool, im aware of that method however for my case i need to remove nodes within a populated div with about 200-500 nodes so i was abit worried about performance issues.
    It's only the immediate children that have to be removed.
    I prefer to check the presence of the firstChild directly:
    Code:
    while( elem.firstChild )
     elem.removeChild( elem.firstChild );
    Tab-indentation is a crime against humanity.

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    There used to be a reason why hasChildNodes was preferred as the condition, but for the life of me it escapes me now.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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