[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Javascript: Add remove elements sequentially

Posted on 2007-08-10
6
Medium Priority
?
422 Views
Last Modified: 2012-08-14
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!
0
Comment
Question by:Manager-pd
  • 2
  • 2
  • 2
6 Comments
 
LVL 5

Expert Comment

by:Tertioptus
ID: 19670892
trying to understand.

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
0
 

Author Comment

by:Manager-pd
ID: 19671098
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('myDiv');
            var num2 = (num - 1)+2;
            var divIdName = "my"+num2+"Div";
            var newdiv = document.createElement('div');
            newdiv.setAttribute("id",divIdName);
            newdiv.innerHTML = "Add Prayer point: <textarea rows=\"5\" cols=\"40\" name=\""+num2+"\"></textarea><br><a href=\"javascript:;\" onclick=\"removeEvent(\'"+divIdName+"\'); show()\">Remove the div &quot;"+divIdName+"&quot;</a><input type=\"text\" value=\""+divIdName+"\" id=\"prayer\">add new<a href=\"javascript:;\" onclick=\"addnew(\'"+num2+"\')\">Add the div &quot;"+divIdName+"&quot;</a>";
            ni.appendChild(newdiv);
            count++;
      }
      else {
      if (count != 6)
            {
            var ni = document.getElementById('myDiv');
            var num2 = (num - 1)+2;
            var divIdName = "my"+num2+"Div";
            var newdiv = document.createElement('div');
            newdiv.setAttribute("id",divIdName);
            newdiv.innerHTML = "Add Prayer point: <textarea rows=\"5\" cols=\"40\" name=\""+num2+"\"></textarea><br><a href=\"javascript:;\" onclick=\"removeEvent(\'"+divIdName+"\')\">Remove the div &quot;"+divIdName+"&quot;</a><input type=\"text\" value=\""+divIdName+"\" id=\"prayer\">add new<a href=\"javascript:;\" onclick=\"addnew(\'"+num2+"\')\">Add the div &quot;"+divIdName+"&quot;</a>";
            ni.appendChild(newdiv);
            count++;
      }
      }
}

function removeEvent(divNum)
{
var d = document.getElementById('myDiv');
var olddiv = document.getElementById(divNum);
var num = document.getElementById(divNum);
d.removeChild(olddiv);
count--;
}

var browserType;

if (document.layers) {browserType = "nn4"}
if (document.all) {browserType = "ie"}
if (window.navigator.userAgent.toLowerCase().match("gecko")) {
   browserType= "gecko"
}

function hide() {
  if (browserType == "gecko" )
     document.poppedLayer =
         eval('document.getElementById("realtooltip")');
  else if (browserType == "ie")
     document.poppedLayer =
        eval('document.getElementById("realtooltip")');
  else
     document.poppedLayer =  
        eval('document.layers["realtooltip"]');
  document.poppedLayer.style.visibility = "hidden";
}

function show() {
  if (browserType == "gecko" )
     document.poppedLayer =
         eval('document.getElementById("realtooltip")');
  else if (browserType == "ie")
     document.poppedLayer =
        eval('document.getElementById("realtooltip")');
  else
     document.poppedLayer =
         eval('document.layers["realtooltip"]');
  document.poppedLayer.style.visibility = "visible";
}


//-->
</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>
0
 
LVL 5

Expert Comment

by:Tertioptus
ID: 19671178
so your all set?
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 11

Accepted Solution

by:
BraveBrain earned 500 total points
ID: 19671367
Glad you worked it out.
I'll post my example anyway, since I had already made it before I saw your last comment

<!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 arr_elements = new Array();
var max_elements = 5;
function addElement() {
  if (arr_elements.length<max_elements) {
    var targetElm = document.getElementById('myDiv');
    var tmpElm = document.createElement('div');
    tmpElm.setAttribute('id','my'+arr_elements.length+'Div');
    var tmpTxt = document.createTextNode('Element Number '+(arr_elements.length+1)+' ('+tmpElm.id+') has been added!');
    tmpElm.appendChild(tmpTxt);
    targetElm.appendChild(tmpElm);
    arr_elements.push(tmpElm);
  }
  setLinks();
}
function removeElement() {
  if (arr_elements.length>0) {
    var parentElm = document.getElementById('myDiv');
    var lastElm = arr_elements.pop();
    parentElm.removeChild(lastElm);
  }
  setLinks();
}
function setLinks() {
  document.getElementById('addLink').className = (arr_elements.length==max_elements) ? 'disabled' : 'enabled';
  document.getElementById('remLink').className = (arr_elements.length==0) ? 'disabled' : 'enabled';
}
//-->
</script>
<style>
<!--
.disabled {
  color: red;
  font-style: italic;
  font-weight: lighter;
}
.enabled {
  color: green;
  font-style: normal;
  font-weight: bolder;
}
-->
</style>
</head>

<body>
      <p><a id="addLink" href="javascript:;" onclick="addElement();" class="enabled">Add element</a> | <a id="remLink" href="javascript:;" onclick="removeElement();" class="disabled">Remove element</a></p>
      <div id="myDiv"> </div>
</body>
</html>
0
 

Author Comment

by:Manager-pd
ID: 19682477
Your solution was better than what I came up with, so I've taken that instead, thanks very much indeed!
0
 
LVL 11

Expert Comment

by:BraveBrain
ID: 19686141
You're very welcome. Thanks for grade and points :)
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question