SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Jul 2008
    Posts
    255
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do I clear the contents of a DIV ?

    Hi everybody.
    I am trying to empty the contents of a DIV. Here is the HTML

    Code:
    <div id="shoppingresults"> 
    <tr class="odd"> 
    <td class="comp1"><p><a class="provider" href="#"><img src="2010.jpg" alt="Provider 1" width="87" height="72"></a></p></td> 
    <td class="comp2"><!--<p class="arrows"><b class="up" title="up">up</b><span>5</span><b title="down" class="down">down</b></p>--></td> 
    <td class="comp3">Chinese/Summer Salsa Chicken Drumsticks</td> 
    <td class="comp5"><!--<p class="tick">&radic;</p>--><p class="the-price">only </p></td> 
    <td class="comp6"><div class="helpwrap"> 
    <p class="the-price">&euro;3</p> 
    <p class="gbox"><!--<a href="#"><span>Arrange<br>
    Cover</span></a>--></p> 
    </div></td> 
    <td class="compexpdate"><div class="helpwrap"> 
    <p class="the-price">30-11-1999</p> 
    <p class="gbox"><!--<a href="#"><span>Arrange<br>
    Cover</span></a>--></p> 
    </div></td> 
    </tr> 
    </div>
    When I run the following Javascript code, he adds text to the shoppingresults DIV, but I want it to remove the existing text.

    Code:
    document.getElementById("shoppingresults").innerHTML = 'xx';
    Is there a way for me to remove all the html from this DIV?

    Thanks in advance.

  2. #2
    I Use MODx kenquad's Avatar
    Join Date
    Dec 2009
    Posts
    424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not a javascript guru, but off the top of my head, why don't you wrap the contents in and extra <div> and dynamically assign it a class - say, .hidden - which would carry the attribute display:none; ?

    That would effectively remove the content from the user's perspective, wouldn't it?

  3. #3
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,608
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    It works for me. Maybe try rearranging the quote styles?

    Code:
    document.getElementById('shoppingresults').innerHTML = "xx";
    Otherwise there's something else happening in your code (that you haven't shown) that is preventing this innerHTML code from running.

    My test code:

    Code HTML4Strict:
    <div id="shoppingresults">
    <tr class="odd">
    <td class="comp1"><p><a class="provider" href="#"><img src="2010.jpg" alt="Provider 1" width="87" height="72"></a></p></td>
    <td class="comp2"><!--<p class="arrows"><b class="up" title="up">up</b><span>5</span><b title="down" class="down">down</b></p>--></td>
    <td class="comp3">Chinese/Summer Salsa Chicken Drumsticks</td>
    <td class="comp5"><!--<p class="tick">&radic;</p>--><p class="the-price">only </p></td>
    <td class="comp6"><div class="helpwrap">
    <p class="the-price">&euro;3</p>
    <p class="gbox"><!--<a href="#"><span>Arrange<br>
    Cover</span></a>--></p>
    </div></td>
    <td class="compexpdate"><div class="helpwrap">
    <p class="the-price">30-11-1999</p>
    <p class="gbox"><!--<a href="#"><span>Arrange<br>
    Cover</span></a>--></p>
    </div></td>
    </tr>
    </div>
    <script type="text/javascript">
    function hideit() {
    	document.getElementById('shoppingresults').innerHTML = "";
    	return false;
    }
    </script>
    <a href="#" onclick="hideit()">HIDE</a>
    Ian Anderson
    www.siteguru.co.uk


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
  •