SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Dec 2005
    Posts
    982
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Emptying an element in JavaScript

    I've got a basic div element, and I am basically trying to empty the contents so that I can rewrite what goes in there. I found this code somewhere a couple days ago(can't find the place again), and it works in all FF and IE versions I have found, but it seems to be breaking in Safari:
    Code JavaScript:
    var cContainer = document.getElementById('c');
    var tmpContainer = cContainer.cloneNode(false);
    cContainer.parentNode.insertBefore(tmpContainer, cContainer);
    cContainer.parentNode.removeChild(cContainer);

    I've tried debugging as much as I can and it seems like after I call that last line (.removeChild), I can no longer access cContainer, even if I recreate the instance using document.getElementById('c'). Unfortunately I can't seem to get any error info from Safari, so I don't even know what the nature of the error is. Can anyone suggest a better way to do this? I didn't expect for Safari to be a problem
    MySQL v5.1.58
    PHP v5.3.6

  2. #2
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Easy way is to do cContainer.innerhtml = "" or you can loop through all the children in cContainer and do the removeChild() on each

    I prefer innerhtml, it's quick and simple.

  3. #3
    SitePoint Guru
    Join Date
    Dec 2005
    Posts
    982
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    isn't .innerHTML() non-standard?

    What's the easiest way to loop through all of the children of this element?

    P.S. I read that the reason Safari is being fussy is that when I create a copy of the element there end up being 2 elements with the same id attribute. Safari sees this as fatal and proceeds to blow up.
    MySQL v5.1.58
    PHP v5.3.6

  4. #4
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can loop through child nodes like this:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    
    	<head>
    		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    		<title>Untitled Page</title>
    		<script type="text/javascript"><!--
    function eraseDiv(id) {
    	eDiv = document.getElementById(id);
    	for (var i=eDiv.childNodes.length-1; i>=0; i--) {
    		eDiv.removeChild(eDiv.childNodes[i]);
    	}
    }
    //-->
    </script>
    	</head>
    
    	<body>
    		<div id="test">
    			<p>This is a Test</p>
    			<p>This is another Test</p>
    			<img src="asd.gif" width="250" height="250" border="1">
    		</div>
    		<p><button onclick="eraseDiv('test');">Erase Div</button></p>
    	</body>
    
    </html>

  5. #5
    SitePoint Guru
    Join Date
    Dec 2005
    Posts
    982
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works perfectly. I just don't like using .innerHTML because I'm not sure how well it is supported, or how well it will be supported in the future. Thanks, funkdaddy
    MySQL v5.1.58
    PHP v5.3.6


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
  •