Hi everyone,

Many thanks for looking. Here's the problem.

I have a form with three option buttons. Depending on what one the user clicks on I need a particular div to be shown, while the other two divs are to be removed.

The only problem is that the removeChild doesn't work. I have worked on this for 3 or four hours now and can't find a solution. Any help would be great as I'm not so hot with javascript.

Here's the code that I need to tweak.

function removeElement_old(REMOVE_DIV){
	
	var d = document.getElementById('sidebar');
	var d_nested = document.getElementById(REMOVE_DIV);
	
	if (d_nested.parentNode == d) { 
		d.removeChild(REMOVE_DIV);
		document.getElementById("sidebar").removeChild(REMOVE_DIV);
		alert("Removed div "+ d_nested.id);
	}
	else{
		alert("Did not remove div " + d_nested.id);	
	}
	
	
}//Closing function



function removeElement(parentDiv, childDiv){
     if (childDiv == parentDiv) {
          alert("The parent div cannot be removed.");
     }
     else if (document.getElementById(childDiv)) {     
          var child = document.getElementById(childDiv);
          var parent = document.getElementById(parentDiv);
          parent.removeChild(child);
     }
     else {
          alert("Child ("+childDiv+") div has already been removed or does not exist.");
          return false;
     }
}

function switchToDiv(DIV){
	
	alert("Div being passed in is: "+DIV);
	
	var packageWrite = "";
	var hotelWrite = "";
	var flightWrite = "";
	
	
	if ( DIV == 'package' ){
		
		removeElement('sidebar','hotel');
		removeElement('sidebar','flight');
		
		packageWrite = "<p>Package shown</p>";
		document.getElementById(DIV).innerHTML = packageWrite; 
		
	}
	else if ( DIV == 'hotel'){
		
		removeElement('sidebar','package');
		removeElement('sidebar','flight');
		
		hotelWrite = "<p>hotel shown</p>";
		document.getElementById(DIV).innerHTML = hotelWrite;
		
	}
	else if( DIV == 'flight'){
		
		removeElement('sidebar','hotel');
		removeElement('sidebar','package');
		
		flightWrite = "<p>flight shown</p>";
		document.getElementById(DIV).innerHTML = flightWrite;
		
	}
	else{
		alert('No search cat selected');
		return false;	
	}

}//closing function

So just to explain the code a bit. I call the switchToDiv function from my HTML. Depending on what I pass in, a specific div is shown. Except that only works for the first item picked. Once I pick an item any more choices after that do not work.

The two functions at the top are two different approaches to me trying to solve the problem.


Many thanks.

Use the Error Console feature of Firefox to track down Javascript errors. Use the Firebug extension of Firefox for debugging Javascript application. Also don't search for parent elements of node, just use the parentNode property of the Node.

This question has already been answered. Start a new discussion instead.