DOM Node Manipulation

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 thefirst 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);
	}
}

ShawnCplus

Code Monkey

Team Colleague

1,583 posts since Apr 2005

Reputation Points: 526

Solved Threads: 268

4 Years Ago

> Internet Exploer does not like this method for some reason
Why? What made you reach that conclusion? In fact, my entire snippet for removing the selected option relies on removeChild and it works fine in IE/FF/Opera.

Also a few things to keep in mind.Post the entire code which we can copy and run instead of just the relevant function which in turn requires us to develop a test case.
Don't use tabs for indentation, at least when posting code. It makes a mess out of it as you can very well see.

Here is a small snippet which should get you going:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Example</title>
    <script type="text/javascript">
    function doDelete(frm) {
        var sel = frm && frm.elements["selBox"];
        
        /* empty / non-existent select box */
        if(!sel || sel.selectedIndex < 0) {
            return;
        }
        var item = sel.options[sel.selectedIndex];
        var parent = item.parentNode;
        parent.removeChild(item);
        
        /* remove all the text nodes */
        while(parent.hasChildNodes()) {
            if(parent.childNodes[0].nodeType != 3) {
                /* non-text node found, exit the function */
                return; 
            }
            parent.removeChild(parent.childNodes[0]);
        }
        /* since we have reached here, the parent node
           must have zero elements so remove it */
        parent.parentNode.removeChild(parent);
    }
    </script>
</head>
<body>
    <form action="#" name="frm">
    <select name="selBox">
        <optgroup label="Swedish Cars">
        <option value ="volvo">Volvo</option>
        <option value ="saab">Saab</option>
        </optgroup>
        <optgroup label="German Cars">
        <option value ="mercedes">Mercedes</option>
        <option value ="audi">Audi</option>
        </optgroup>
    </select>
    
    <input type="button" value="Delete Selected" onclick="doDelete(this.form);">
    </form>
</body>
</html>

~s.o.s~

Failure as a human

Administrator

11,938 posts since Jun 2006

Reputation Points: 3,281

Solved Threads: 734

4 Years Ago

Yeah, I copied from Vim, and due to laziness haven't changed the tabwidth to 4. Anyway, aside from var sel = frm && frm.elements["selBox"]; being very neat since I haven't seen an inline check for initialization like that before, I figured out the problem. Sending the parent node as an argument was completely unnecessary given that when I was calling it I was just using the child.parentNode anyway (stupid) so instead I'm sending the child as an argument and deriving the parent from that instead of the other way around.

I probably thought removeChild didn't work because of the fact that at one point during development removeChild didn't work in IE but removeNode did *shrug*.

Thanks for that, that really had me stumped.

ShawnCplus

Code Monkey

Team Colleague

1,583 posts since Apr 2005

Reputation Points: 526

Solved Threads: 268

This question has already been solved

You