I've come across a bit of a conundrum. Firefox handles DOM manipulation based on the standard which (would'a'thunk-it?) works. However, Internet Explorer does not. So here's the situation.
I've got a select box and a remove button which, in Firefox, works as advertised, ie., removes the selected element from the list box and destroys the parent if the container optgroup becomes empty using the removeChild()
method. Internet Exploer does not like this method for some reason so I must use the removeNode()
method. This is all well and good except for the fact that when using removeNode()
you may only remove the first child element. For example:
Select Box:
OptGroup 1:
Option 1 <---IE can only remove this element
Option 2 <---Firefox can remove this, IE cannot
End Select Box
So, in essence, my question is: Has anyone found a way, in IE, to be able to remove a random element (and my random I mean not the first child) from a list of child nodes?
This is my current code
function removeSelected(parentElement)
{
if(parentElement.id == null)
parentElement = document.getElementById(parentElement);
for(i=0;i<parentElement.childNodes.length;i++)
{
child = parentElement.childNodes[i];
if(child.seleced)
{
parentElement.removeChild(child);
if(!parentElement.hasChildNodes())
{
try/*standard compliant*/{
parentElement.parentNode.removeChild(parentElement);}
catch/*IE crap*/(ex){
parentElement.parentNode.removeNode(parentElement);{
}
}
else if(child.firstChild.nodeType == Node.ELEMENT_NODE && child.hasChildNodes())
removeSelected(child.firstChild);
}
}