Hi...

First, Tripy thank you for my other posting.

Now, I came across ANOTHER problem...

Here's the HTML of what I need to manipulate...

<div id="menu1">
<span class="dropdown">
<a href="#">Equities &amp; Options</a><br />
<a href="#">Fixed Income</a><br />
<a href="#">Mutual Funds</a><br />
<a href="#">Managed Money</a><br />
<a href="#">Annuities</a><br />
<a href="#">Other Investments</a><br />
<a href="#" class="dropdown">Account Types</a><br />
</span>
</div>

I have to delete the ENTIRE line of the menu... the <a> and <br />

To do this, I'm pulling getElementsByTagName("span")...
var spanList = getElementsByTagName("span");

This spanList length is 1 because there's only one span.

My problem is accessing the child. If I hard code it (spanList[i].childNodes[x].nodeName - where x = a number in the array), I can access it.

But, how to do via a for loop.

hasChildNodes() does not work on getElementsByTagName, only on getElementsById.

if I do a spanList.hasChildNodes() - I get a JavaScript error saying the object doesn't support this.

I've scoured the web and books but unless if I pre-know the number of child elements in spanList, I can't access them.

Thanks
Donna

Hi Donnaz,

First, Tripy thank you for my other posting.

You're welcome.

You have to split your logic deeper.
Here, you don't want to get an array of element to delete, you want to get the element who's childs must be deleted.
Then, loop through every childs and remove them one by one.

Just to make it simpler, I assume you can put an ID on the span with the class "dropdown".

<div id="menu1">
<span class="dropdown" id="dropDown">
<a href="#">Equities &amp; Options</a><br />
<a href="#">Fixed Income</a><br />
<a href="#">Mutual Funds</a><br />
<a href="#">Managed Money</a><br />
<a href="#">Annuities</a><br />
<a href="#">Other Investments</a><br />
<a href="#" class="dropdown">Account Types</a><br />
</span>
</div>
<script type="text/javascript">
  var contener=document.getElementById('dropDown');
  while(contener.childNodes.length>0){
    contener.removeChild(contener.firstChild);
  }
</script>

Tripy,

Thanks.

I can't put in an id. This is a code snippet of a file that is read in by like 15,000 pages, so if I put in an id, I'm not sure if it will screw up code somewhere else that maybe calling for the same id.

That's the problem.

I will try what you suggest. I just have to finish this.

DonnaZ

No problem.
This should do the trick then:
We target the div with an id, and we take the first child (the span then) as the container to empty.

<div id="menu1">
<span class="dropdown">
<a href="#">Equities &amp; Options</a><br />
<a href="#">Fixed Income</a><br />
<a href="#">Mutual Funds</a><br />
<a href="#">Managed Money</a><br />
<a href="#">Annuities</a><br />
<a href="#">Other Investments</a><br />
<a href="#" class="dropdown">Account Types</a><br />
</span>
</div>
<script type="text/javascript">
  var _top=document.getElementById('menu1');
  var container =_top.firstChild;
  while(container .childNodes.length>0){
    container .removeChild(contener.firstChild);
  }
</script>

Tripy,

I'm not sure on your code. It deletes ALL the menu items.

If I do slap on an id, how would I access the child nodes individually? I'm trying to kill the Annuities part of it with it's <br /> (because they're two separate elements).

There's also a problem between browsers. Mozilla adds text nodes so it throws off the count on the index. (I would test for the condition though).

This really is a pain because it's for my job and I've been working on it for three days.

Donna

I must have misunderstood you then.
Effectively, this script deletes everything inside the <span>

I have to delete the ENTIRE line of the menu... the <a> and <br />

Can you be more precise ? I don't get the subtility about what you want to do.

But, if I detail your first post:

hasChildNodes() does not work

Well, as I showed you in my code, you can do a childNodes.length to get the number of childs in a element.

I think the base of the problem is how the menu is structured, i.e. as a span instead of something simpler like an unordered list.
I don't actually know how to do this out of my head, otherwise I'd gladly assist you, but, tripy, what I think DonnaZ is trying to do is the following. Menu before deletion

<div id="menu1">
<span class="dropdown">
<a href="#">Equities &amp; Options</a><br />
<a href="#">Fixed Income</a><br />
<a href="#">Mutual Funds</a><br />
<a href="#">Managed Money</a><br />
<a href="#">Annuities</a><br />
<a href="#">Other Investments</a><br />
<a href="#" class="dropdown">Account Types</a><br />
</span>
</div>

Menu after deletion (of Mutual Funds)

<div id="menu1">
<span class="dropdown">
<a href="#">Equities &amp; Options</a><br />
<a href="#">Fixed Income</a><br />

<a href="#">Managed Money</a><br />
<a href="#">Annuities</a><br />
<a href="#">Other Investments</a><br />
<a href="#" class="dropdown">Account Types</a><br />
</span>
</div>

As in not only remove the anchor, but also the line break element. Not sure if this element can even be accessed via JS.

Tripy and all,

Thanks.

I did slap an ID on it... it just was the best way of doing it.

Pulling the getElementsByTagName("a") would leave a <br>

So, I just slapped an ID on the span. Then I was able to kill both the <a> and the <br>

I actually did something cool that only worked in IE... but because of the extra #text tags... it would never work in Mozilla.

Donna

Originally Posted by DonnaZ

I actually did something cool that only worked in IE... but because of the extra #text tags... it would never work in Mozilla.

I wonder what that could be