Please help about removeChild

docco · 09-12-2012, 06:53 AM

I can not understand what's wrong with the below. Can not remove child in Crome. Anyone help

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Add & Delete Child</title>
</head>
<body>
<script type=text/javascript>
var childID=0;
function addChild()
{
  var parent = document.getElementById('myDiv');
  var newChild = document.createElement('div');

  childID=childID+1;  
  var childName = 'Div'+childID; // set index for child for deleting later
  newChild.setAttribute('id',childName);
  newChild.innerHTML = 'Element '+childName+' has been added! <a href=\'#\' onclick=\'removeElement('+childName+')\'>Remove element "'+childName+'"</a>';
  parent.appendChild(newChild);
}
function removeElement(divName)
{
  var parent = document.getElementById('myDiv');
  var oldDiv = document.getElementById(divName);
  parent.removeChild(oldDiv);
}
</script>

<p><button onclick="addChild();">Add New Elements</button></p>
<div id="myDiv"> </div>

</body>

</html>

docco · 09-12-2012, 08:55 AM

I have found down the error. Thanks

Raymond Cheyne · 09-12-2012, 02:59 PM

Quote:

Originally Posted by docco

I can not understand what's wrong with the below. Can not remove child in Crome. Anyone help

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Add & Delete Child</title>
</head>
<body>
<script type=text/javascript>
var childID=0;
function addChild()
{
  var parent = document.getElementById('myDiv');
  var newChild = document.createElement('div');

  childID=childID+1;  
  var childName = 'Div'+childID; // set index for child for deleting later
  newChild.setAttribute('id',childName);
  newChild.innerHTML = 'Element '+childName+' has been added! <a href=\'#\' onclick=\'removeElement('+childName+')\'>Remove element "'+childName+'"</a>';
  parent.appendChild(newChild);
}
function removeElement(divName)
{
  var parent = document.getElementById('myDiv');
  var oldDiv = document.getElementById(divName);
  parent.removeChild(oldDiv);
}
</script>

<p><button onclick="addChild();">Add New Elements</button></p>
<div id="myDiv"> </div>

</body>

</html>

I suggestion putting your script in the <head>, not the <body>. Beyond that, sorry, I'm not sure.

Raymond

felgall · 09-12-2012, 10:43 PM

Quote:

Originally Posted by Raymond Cheyne

I suggestion putting your script in the <head>, not the <body>. Beyond that, sorry, I'm not sure.

Raymond

JavaScript belongs at the bottom of the body not in the head. This is particularly true of scripts like this that use document object model commands where the script needs to come AFTER the parts of the HTML that it is referencing.

The only script I know of that needs to go in the head of a web page is the one that tests if the page is about to load inside a frame and which reloads the page outside of the frame. All other scripts run better at the bottom of the page where in most cases you can then remove references to onload and so reduce the chances of script clashes.

Placing scripts in the head was common back in the Netscape 4 days prior to JavaScriptbeing able to properly interact with the HTML. It became far less efficient to put the scripts in the head when the DOM was introduced in more modern browsers such as IE5.