How to delete extra DIV element from HTML Document

Question

I am developing a News application and for this i am using a web product for fetching News Headline. When I call a NewsHeadline, product sends a Html Code including News Headline.

<div class="mydiv">


<script type="text/javascript">
  document.write('&lt;div style="display: none"&gt;');
</script><div style="display: none;">

<div>< a href="http:// www.abc.com.au/ news_manager/default.aspx ?z=41">Main News Item 6</a>

</div>
<script type="text/javascript">
  document.write('&lt;/div&gt;');
</script></div>

<script src="http://www.abc.com/news_manager/ajaxzone.aspx?z=41&amp;amp;pz=125&amp;amp;h=1&amp;amp;sort=startdate&amp;amp;ord=desc&amp;amp;xlaparsing=true" language="javascript"></script><div id="xlaANMzone_928960"><div class="" id="928960"><h5>
  <a href="http://www.mysite.com/article.asp?a=1144&amp;amp;Z=41"&gt;
     test article from anil
  </a>
</h5>
</div>
[red]<div align="left"></div>[/red]
</div>

</div>

The Newsproduct is sending an extra div ie () on the lower end of above code( written withing [Red] block). and this div is taking extra space in IE 6, and 7 only. its working fine in OPera,FF and Safari.

So what I need is to DELETE this extra div either on document ready or on load event. I used some scripts not worked for me. Any help would be appreciated

Answer 1

Following code removes all empty divs from document

var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++)
{
  var div = divs[i];
  if(div.innerHTML=="") div.parentNode.removeChild(div);
}

..If you have a trim function, you could use innerHTML.trim() where necessary...

..It should be run at onload