Add/Remove child: Javascript

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">

<!--

function addEvent()

{

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

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

var num = (document.getElementById("theValue").value -1)+ 2;

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=\"removeEvent(\'"+divIdName+"\')\">Remove the div &quot;"+divIdName+"&quot;</a>";

ni.appendChild(newdiv);

}

function removeEvent(divNum)

{

var d = document.getElementById('myDiv');

var olddiv = document.getElementById(divNum);

d.removeChild(olddiv);

}

//-->

</script>

</head>

<body>

        <input type="hidden" value="0" id="theValue" />

        <p><a href="javascript:;" onclick="addEvent();">Add Some Elements</a></p>

        <div id="myDiv"> </div>

</body>

</html>
Search

Code
