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:

<!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 ""+divIdName+""</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

d.removeChild(olddiv);
to
d.parentNode.removeChild(olddiv);
or, better yet, remove the "olddiv" part altogether, as it's the same thing as "d" in your 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:
<!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~