Javascript: Add remove elements sequentially
Hello i'm trying to do something a bit like the following, but am not very well versed in the javascript:
http://www.dustindiaz.com/basement/addRemoveChild.html
it is contained in a form and I really want to avoid submitting the form to add/remove elements.
Now this example is sorta what I need except I need a maximum number of elements to be added and I need them to be sequential I.e. You add 1 then you add 2, then you remove 2, then you remove 1 then when you add again, it adds 1 then 2 and so on. In the example (and all others similar) you add 1, then 2, then 3, you take 3 and 2 away then the next time you add it jumps to 4 then 5.
Thanks very much in advance!
http://www.dustindiaz.com/basement/addRemoveChild.html
it is contained in a form and I really want to avoid submitting the form to add/remove elements.
Now this example is sorta what I need except I need a maximum number of elements to be added and I need them to be sequential I.e. You add 1 then you add 2, then you remove 2, then you remove 1 then when you add again, it adds 1 then 2 and so on. In the example (and all others similar) you add 1, then 2, then 3, you take 3 and 2 away then the next time you add it jumps to 4 then 5.
Thanks very much in advance!
ASKER
It's ok, I've worked it out. Sorry for being unclear:
<!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 count = 1;
function addnew(num)
{
if (count == 1)
{
var ni = document.getElementById('m
var num2 = (num - 1)+2;
var divIdName = "my"+num2+"Div";
var newdiv = document.createElement('di
newdiv.setAttribute("id",d
newdiv.innerHTML = "Add Prayer point: <textarea rows=\"5\" cols=\"40\" name=\""+num2+"\"></textar
ni.appendChild(newdiv);
count++;
}
else {
if (count != 6)
{
var ni = document.getElementById('m
var num2 = (num - 1)+2;
var divIdName = "my"+num2+"Div";
var newdiv = document.createElement('di
newdiv.setAttribute("id",d
newdiv.innerHTML = "Add Prayer point: <textarea rows=\"5\" cols=\"40\" name=\""+num2+"\"></textar
ni.appendChild(newdiv);
count++;
}
}
}
function removeEvent(divNum)
{
var d = document.getElementById('m
var olddiv = document.getElementById(di
var num = document.getElementById(di
d.removeChild(olddiv);
count--;
}
var browserType;
if (document.layers) {browserType = "nn4"}
if (document.all) {browserType = "ie"}
if (window.navigator.userAgen
browserType= "gecko"
}
function hide() {
if (browserType == "gecko" )
document.poppedLayer =
eval('document.getElementB
else if (browserType == "ie")
document.poppedLayer =
eval('document.getElementB
else
document.poppedLayer =
eval('document.layers["rea
document.poppedLayer.style
}
function show() {
if (browserType == "gecko" )
document.poppedLayer =
eval('document.getElementB
else if (browserType == "ie")
document.poppedLayer =
eval('document.getElementB
else
document.poppedLayer =
eval('document.layers["rea
document.poppedLayer.style
}
//-->
</script>
</head>
<body>
<div id="realtooltip" style="visibility: visible">
<input type="hidden" value="0" id="theValue" />
<p><a href="javascript:;" onclick="addnew(0); hide();">Add Some Elements</a></div></p>
<div id="myDiv"> </div>
</body>
</html>
<!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 count = 1;
function addnew(num)
{
if (count == 1)
{
var ni = document.getElementById('m
var num2 = (num - 1)+2;
var divIdName = "my"+num2+"Div";
var newdiv = document.createElement('di
newdiv.setAttribute("id",d
newdiv.innerHTML = "Add Prayer point: <textarea rows=\"5\" cols=\"40\" name=\""+num2+"\"></textar
ni.appendChild(newdiv);
count++;
}
else {
if (count != 6)
{
var ni = document.getElementById('m
var num2 = (num - 1)+2;
var divIdName = "my"+num2+"Div";
var newdiv = document.createElement('di
newdiv.setAttribute("id",d
newdiv.innerHTML = "Add Prayer point: <textarea rows=\"5\" cols=\"40\" name=\""+num2+"\"></textar
ni.appendChild(newdiv);
count++;
}
}
}
function removeEvent(divNum)
{
var d = document.getElementById('m
var olddiv = document.getElementById(di
var num = document.getElementById(di
d.removeChild(olddiv);
count--;
}
var browserType;
if (document.layers) {browserType = "nn4"}
if (document.all) {browserType = "ie"}
if (window.navigator.userAgen
browserType= "gecko"
}
function hide() {
if (browserType == "gecko" )
document.poppedLayer =
eval('document.getElementB
else if (browserType == "ie")
document.poppedLayer =
eval('document.getElementB
else
document.poppedLayer =
eval('document.layers["rea
document.poppedLayer.style
}
function show() {
if (browserType == "gecko" )
document.poppedLayer =
eval('document.getElementB
else if (browserType == "ie")
document.poppedLayer =
eval('document.getElementB
else
document.poppedLayer =
eval('document.layers["rea
document.poppedLayer.style
}
//-->
</script>
</head>
<body>
<div id="realtooltip" style="visibility: visible">
<input type="hidden" value="0" id="theValue" />
<p><a href="javascript:;" onclick="addnew(0); hide();">Add Some Elements</a></div></p>
<div id="myDiv"> </div>
</body>
</html>
so your all set?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Your solution was better than what I came up with, so I've taken that instead, thanks very much indeed!
You're very welcome. Thanks for grade and points :)
So instead of just clicking, you would like the user to be able to type in a number to add, or a number to remove. Add sequentially from a certain position. Remove sequentially from a certain position.
it that right