.removeChild not working

[hgmme@wa]

I have a list containing check boxes and labels to go with those check boxes (A list of "Groups"). Then when one of those check boxes is selected, depending on the value of a drop down menu, it then does an ajax request to list the categories under that "group" within the <li> that the "group" name and check box is in. Here's that specific html before they check a box:

<div id="groupsDIV">	<div id="groupsH">Groups</div>	<ul id="groupsUL">		<li id='VyouthLI'><label><input id='V1' type='checkbox' class='groups' name='groups[]' value='1' onclick='checkGroup(this.id, "youth")'/>Youth</label></li>		<li id='Vkids-placeLI'><label><input id='V2' type='checkbox' class='groups' name='groups[]' value='2' onclick='checkGroup(this.id, "kids-place")'/>Kids Place</label></li>		<li id='VworshipLI'><label><input id='V3' type='checkbox' class='groups' name='groups[]' value='3' onclick='checkGroup(this.id, "worship")'/>Worship</label></li>		<li id='Vsmall-groupLI'><label><input id='V4' type='checkbox' class='groups' name='groups[]' value='4' onclick='checkGroup(this.id, "small-group")'/>Small Group</label></li>		<li id='Vwhats-happeningLI'><label><input id='V6' type='checkbox' class='groups' name='groups[]' value='6' 	onclick='checkGroup(this.id, "whats-happening")'/>What's Happening</label></li>		<li id='VcoffeeLI'><label><input id='V7' type='checkbox' class='groups' name='groups[]' value='7' onclick='checkGroup(this.id, "coffee")'/>Coffee</label></li>	</ul>	</div>

Here's the html after they check the box for "youth", and the drop down meets the requirements to list the categories:

<div id="groupsDIV">	<div id="groupsH">Groups</div>	<ul id="groupsUL">		<li id='VyouthLI'><label><input id='V1' type='checkbox' class='groups' name='groups[]' value='1' onclick='checkGroup(this.id, "youth")'/>Youth</label></li>		<ul id="V1cats"> 			<li>Life</li> <!--This will also have a check box when I get there-->			<li>youth ministry</li>		</ul>		<li id='Vkids-placeLI'><label><input id='V2' type='checkbox' class='groups' name='groups[]' value='2' onclick='checkGroup(this.id, "kids-place")'/>Kids Place</label></li>		<li id='VworshipLI'><label><input id='V3' type='checkbox' class='groups' name='groups[]' value='3' onclick='checkGroup(this.id, "worship")'/>Worship</label></li>		<li id='Vsmall-groupLI'><label><input id='V4' type='checkbox' class='groups' name='groups[]' value='4' onclick='checkGroup(this.id, "small-group")'/>Small Group</label></li>		<li id='Vwhats-happeningLI'><label><input id='V6' type='checkbox' class='groups' name='groups[]' value='6' 	onclick='checkGroup(this.id, "whats-happening")'/>What's Happening</label></li>		<li id='VcoffeeLI'><label><input id='V7' type='checkbox' class='groups' name='groups[]' value='7' onclick='checkGroup(this.id, "coffee")'/>Coffee</label></li>	</ul>	</div>

and here's the relative java script:

function checkGroup(theID, nice) {	var isChecked = document.getElementById(theID).checked;	var groupID = theID.substr(1);	var otherID = 'H' + groupID;	var status = document.getElementById('statusIN').value;	if ( isChecked == false ) {		if ( status >= 3 ) {			var groupLI = document.getElementById('V' + nice + 'LI');			var catUL = document.getElementById('V' + groupID + 'cats');			var remove = groupLI.removeChild(catUL);//This is the troublesome code		} else {			document.getElementById(theID).checked=false;			document.getElementById(otherID).checked=false;								}	} else if ( isChecked == true ) {		if ( status >= 3 ) {			xmlHttp=GetXmlHttpObject();//This is the same code off of the W3schools tutorial.			if (xmlHttp==null) {				alert ("Browser does not support HTTP Request");				return;			}			var url = "<?php echo $config_basedir; ?>" + "register.php";			url=url+"?do=listCats&groupID=" + groupID;			url=url+"&sid="+Math.random();			xmlHttp.onreadystatechange=stateChanged1;			xmlHttp.open("GET",url,true);			xmlHttp.send(null);		} else {			document.getElementById(theID).checked=true;			document.getElementById(otherID).checked=true;		}	}	function stateChanged1() {		if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {			document.getElementById('V' + nice + 'LI').innerHTML+=xmlHttp.responseText;			document.getElementById('H' + nice + 'LI').innerHTML+=xmlHttp.responseText;			document.getElementById(theID).checked=true;			document.getElementById(otherID).checked=true;		}	}}

Edit: Oh yea, the error I'm getting is 'Node was not found" code: "8', and it's firebug that is showing me that error. I haven't tested this in any browser other than FF since this error has occurred.

[hgmme@wa]

Hmm... I don't think it's ever taken this long for someone to reply to any of my questions on this forum...

[jeffman]

A lot of people haven't advanced to DOM-tree methods yet. So forgive me if I ask the obvious: have you alerted the values of groupLI and catUL to make sure they are valid and make sense. And that you haven't already deleted the node in question. Use DOM inspector to verify that.

[hgmme@wa]

A lot of people haven't advanced to DOM-tree methods yet.

hmm, I wasn't aware of that. Is it because it's still new and not fully developed or have they just not gotten to it yet? What are they doing in a case like this instead?

So forgive me if I ask the obvious: have you alerted the values of groupLI and catUL to make sure they are valid and make sense. And that you haven't already deleted the node in question. Use DOM inspector to verify that.

I have alerted them, and they return the correct stuff. I can both see the node I'm trying to delete in the browser and in firebug. Again firebug is returning an error that says:

Node was not found" code: "8

[Ingolme]

I'm not totally sure, but I find that removeChild only works if the node that's removing the child is a direct parent of the child. I always use removeChild like this: myNode.parentNode.removeChild(myNode), just to be sure it works

[jesh]

A lot of people haven't advanced to DOM-tree methods yet.

And a lot of other people take the weekend off from reading this board. Do you have a working example of this anywhere that we can hit? Are you sure that the AJAX response is returning the HTML correctly to build out the sublist?

[jeffman]

hmm, I wasn't aware of that. Is it because it's still new and not fully developed or have they just not gotten to it yet? What are they doing in a case like this instead?

New in the sense that they're only getting fully implemented in recent browser releases, yeah. Not well documented at places like W3Schools or the basic Javascript for Dummies books.Some elements like select have older routines for removing and adding options. I don't see anything like that in the HTML 4.01 spec. Maybe you can use the display: none property if you just want it invisible. Or maybe folks haven't bothered.These kinds of methods are very obtrusive, and some designers don't like that.ANYWAYI experimented, and the error you're getting suggests that your node exists but it is not the child of the thing you're calling its parent.

[jesh]

I experimented, and the error you're getting suggests that your node exists but it is not the child of the thing you're calling its parent.

If your example markup is any indicator, then Deirdre's Dad might be right on the money:

<li id='VyouthLI'><label><input id='V1' type='checkbox' class='groups' name='groups[]' value='1' onclick='checkGroup(this.id, "youth")'/>Youth</label></li><ul id="V1cats"><li>Life</li> <!--This will also have a check box when I get there--><li>youth ministry</li></ul>

The V1cats UL's parent node is the UL that has an ID of "groupsUL", not the LI that has the ID of VyouthLI.

[hgmme@wa]

I'm now confused (and it's not ya'lls fault).Reason being: Jesh pointed out what I posted for code, and that isn't actually my code, and I don't remember if I copied that from firebug, or if I copied the html before the first checkbox is checked, then manually added the "V1cats" <ul>. But the "V1cats" <ul> is in the <li> that has the youth checkbox.The webpage is: https://www.ctkanacortes.com/register.phpYou will be redirected to log in, and you can do so with the username: w3schools, and the same thing as the password. (Don't worry you can't actually add a user or entry.)I tried doing what ingolme said and it doesn't give any errors, but it still isn't removing it.

[hgmme@wa]

Wait, it is working, to an extent. There is a duplicate set of check boxes that's invisible, and it's escaped my mind that, that's the case meaning there are two <ul> tags with the same id. So I'm may have to do like one of ya'll said in a different topic and use javascript to write the value of the visible check boxes to an input upon submit time (but how I'm not sure, yet).So thanks ingolme for pointing me in the right direction.edit: I'll leave the w3schools access for a couple of days so that those of you who want to take a quick peek can.