Need help with adding / removing parent object..

ShadowIce · 05-17-2009, 11:57 PM

Hi all

I have been doing research on parent object nodes & child nodes. I have a small problem with the code I made. What I need for it to do is depending on which link u click, it adds or deletes the node specified in the function. And the name of the div shouldnt matter as it should be used when clicking on the link <a href="javascript:addevent('divname');">Add Element</a>.

for instance:

"Add element" | "Delete element"

if u click on the add element, then it adds an element, and if u click on the delete element, then it deletes the added element.

Here is the code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Add/Remove child: Javascript</title>
<style type="text/css" media="screen">
  .Welcome {
    background: #FFE2AF;
    color: #000;
    border: 2px solid #ccc;
    padding: 1em;
  }
</style>
</head>

<script>

 var num = 0;

function addEvent(myDiv) {

  var ni = document.getElementById(myDiv);
  var numi = document.getElementById('theValue');

   num++;
   numi.value = num;

  var divIdName = "my"+num+"Div";
  var newdiv = document.createElement('div');
  
   newdiv.setAttribute("id",divIdName);
   newdiv.innerHTML = "Element Number " + num + " has been added! <a href=\"javascript:;\" onclick=\"removeElement(\'"+divIdName+"\')\">Remove the element &quot;"+divIdName+"&quot;</a>";

    ni.appendChild(newdiv);
}

function removeElement(divNum) {
  
  var d = document.getElementById(divNum);
  var olddiv = document.getElementById(divNum);
  
  d.removeChild(olddiv);
   num -= 1;
}
</script>

<body>
  <div class="welcome">
  <H1>Welcome!</H1>
  </div>
	<input type="hidden" value="0" id="theValue" />
	<p><a href="javascript:;" onClick="addEvent('myDiv');">Add Some Elements</a></p>
	<p><a href="javascript:;" onClick="addEvent('myDiv1');">Add Some Elements</a></p>
	<div id="myDiv"></div>
	<div id="myDiv1"></div>
</body>
</html>

ANY help is GREATLY appreciated!

Thanks!

~SI~

venegal · 05-18-2009, 12:50 AM

The method removeChild does just that -- it removes a child element. This means you will have to call it on the parent of the element you wish to remove, so you have to change

Code:

d.removeChild(olddiv);

to

Code:

d.parentNode.removeChild(olddiv);

or, better yet, remove the "olddiv" part altogether, as it's the same thing as "d" in your code:

Code:

d.parentNode.removeChild(d);

Also, instead of using that counter to keep tracks of the created elements via their ids, you could just abandon the id part, which is a bit awkward, altogether, and instead keep track of the created elements by putting them in an array. Your code could look something like this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Add/Remove child: Javascript</title>
<script type="text/javascript">
var createdElements = [];

function addElement(parentNodeId) {
	var parentNode = document.getElementById(parentNodeId);
	var newdiv = document.createElement('div');
	createdElements.push(newdiv);
	newdiv.innerHTML = "Element Number " + createdElements.length + " has been added! <a href=\"#\" onclick=\"removeElement(this.parentNode)\">Remove the Element Number " + createdElements.length + "</a>";
	parentNode.appendChild(newdiv);
}

function removeElement(element) {
  element.parentNode.removeChild(element);
  createdElements.splice(createdElements.indexOf(element), 1);
}
</script>
</head>

<body>
	<p><a href="#" onclick="addElement('myDiv');">Add Some Elements</a></p>
	<p><a href="#" onclick="addElement('myDiv1');">Add Some Elements</a></p>
	<div id="myDiv"></div>
	<div id="myDiv1"></div>
</body>
</html>

ShadowIce · 05-18-2009, 03:18 PM

Once again, thank you for your time and for your patience with me

Thanks to you, my project is almost complete!

Thank you so much!

~SI~