How do I clear the contents of a DIV?

JavaScript
1

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


<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.


document.getElementById("shoppingresults").innerHTML = 'xx';

Is there a way for me to remove all the html from this DIV?

Thanks in advance.

2

It works for me. Maybe try rearranging the quote styles?

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:

<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>
3

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?