removeChild() not removing <img />

[]|V|[agnus]

I've made good progress with a script I'm writing that will link <q />s to their cite attribute URI, but I've hit yet another roadblock...

To link to the cite URI of <q /> elements, I want to basically wrap the existing quote text in an <a />. To do this, I thought it would be easy enough to capture the original <q /> text in a variable, then drop all child nodes of the <q /> and replace them with the newly constructed <a /> that contains the original <q /> text.

I've got this working fine, but I'm having issues with the recognition of child nodes that are <img /> elements. In WordPress, for example, certain smilies are converted to images. If a smiley is used in a quote, I want to grab the value of the <img />'s alt attribute before dumping the <img /> element as well as any other text nodes.

I'm not getting the <img />'s alt value in my variable holding the original <q /> text, and the <img /> elements aren't being dropped either.

An example page here: http://sethrasmussen.com/common/js/q-child-nodes.html

The script here: http://sethrasmussen.com/js/_exit.js

***

I cross posted this from my other thread because I thought the specific title might get better attention. I've googled ad nauseum, etc. I can't seem to find anything pointing to why removeChild might not be working in this instance.

[]|V|[agnus]

It seems that, in Firefox, the following structure:

<q>Text<img /></q>

Is showing two #text nodes as the children of the <q /> element, instead of one #text and one element node.

Even still, I don't follow why the actual #text node is being removed, but not the <img /> element's node.

EDIT: Discovered that the second #text node was due to white space. Still haven' figured why the <img /> isn't being removed.

[Kor]

Yes, Moz counts even the empty textNodes as childs.

a simple crossbrowser solution to remove all the childs

while(element.hasChildNodes()){
element.removeChild(element.childNodes[0])
}

[]|V|[agnus]

hrm... but it seems that, for one, the <img /> isn't even being recognized as a child, or it is, but as a #text node.

regardless, i am having other text nodes removed using a for loop to loop over the length of elem.childNodes.

what would be different about your loop other than syntax?

also, without the index of a for loop, it's more tedious to check each child for what type of node it is. if you checked my script, if the child is an <img /> i want to get it's alt attribute value before i drop it, whereas i just grab the nodeValue of text nodes.

[Kor]

hm... IMG might not need a end tag... the code I have given your works always for me, but I dont use <img /> for inserting images (on the other hand, if trying a innerHTML after a createElement IMG you might see that DOM don't insert new elements as <tag /> but as <tag></tag> if tag needs that)

I did not understand quite well your other problems, yet... if you want to only remove a certain child you may try find that child element by its tag

element.getElementsByTagName('tag')[0]

if they are more than one, loop