Add remove HTML elements with Javascript

I have the following code that i have mostly written and gathered from tutorials, the removing of elements is fine.

The problem occurs when i try to add an element after removing a few of the elements, if i try to add an element it also adds all the elements that were removed.
<html>
<head>
     <title>Test Page</title>
 
     <script language="JavaScript" type="text/javascript">
 
 //CODE FOR INPUTTING FIELDS
     
 var arrInput = new Array(0);
  var arrInputValue = new Array(0);
 
function addInput() {
  arrInput.push(arrInput.length);
  arrInputValue.push("");
  display();
}
 
function display() {
  document.getElementById('parent').innerHTML="";
  for (intI=0;intI<arrInput.length;intI++) {
    document.getElementById('parent').innerHTML+=createInput(arrInput[intI], arrInputValue[intI]);
  }
}
 
function saveValue(intId,strValue) {
  arrInputValue[intId]=strValue;
}  
 
//Add the input
 
function createInput(id,value) {
  return '<div id="child'+id+'"><input type="text" id="test'+id+'" value="'+value+'">test'+id+'<input type="button" value="Remove this element" onClick="removeElement(\'parent\',\'child'+id+'\');"><div>'; 
  
 
}
 
 
 
//Remove the input  
		  
		  
function removeElement(parentDiv, childDiv){     
          var child = document.getElementById(childDiv);
          var parent = document.getElementById(parentDiv);
          parent.removeChild(child);
   
} 
  
     </script>
</head>
 
<body>
    
 
<a href="javascript:addInput()">Add more input field(s)</a><br>
<a href="javascript:deleteInput()">Remove field(s)</a>
<div id="parent">
 
 
</div>
 
 
 
</body>
</html>

Open in new window

agulaidAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

jjardineCommented:
your add function adds the item to the array but then your deleteInput function never removes the data from the array.  So you keep building the array and putting all its contents on the page but never pop the items from the array when they are removed.
0
agulaidAuthor Commented:
how would i pop the items from the array? im not too familier with the pop function... can you give me an example?
0
agulaidAuthor Commented:
Im assuming its something like this:


function deleteInput() {
  if (arrInput.length > 0) { 
     arrInput.pop(); 
     arrInputValue.pop();
  }
  display(); 
}

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

hieloCommented:
why do you keep repopulating the entire div? If you add a field, put data in the field and then click add again, the data of the first would be gone - isn't it?
0
hieloCommented:
try:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
<head>
<title></title>
<script type="text/javascript">
function addField(prop){
	var parentElem = document.getElementById(prop.container);
	if( parentElem )
	{
		var d = document.createElement("div");
		d.innerHTML="<input type='#TYPE#' name='#NAME#' value='#VALUE#' id='#ID#' /><input type='button' onclick='removeField(this.parentNode)' value='Remove' />";
 
		parentElem.appendChild(d);
		for(var p in prop)
		{
			var t = String(p).toUpperCase()
			switch( t ){
				case "TYPE":
				case "NAME":
				case "ID":
				case "VALUE":
				d.innerHTML=d.innerHTML.replace("#"+t+"#",prop[p]);
 
				break;
			}
		}
 
 
		if(prop.id=='auto')
		{
			var limit = parentElem.childNodes.length;
			for( var i=0; i < limit; ++i)
			{
				parentElem.childNodes[i].firstChild.id=prop.name+(1+i);
			}
		}
	return d;
	}
return null;
}
 
function removeField( o ){
	o.parentNode.removeChild(o);
}
</script>
</head>
<body>
<span onclick="addField( {container:'containerDiv',type:'text', name:'test', id:'auto', value:''} )">Add</span>
<div id="containerDiv"></div>
</body>
</html>

Open in new window

0
agulaidAuthor Commented:
Hielo, the ID isn't unique hence why i did the original loop. your script works well the fields need to be unique and have a looping number.
0
hieloCommented:
if the fields need to be unique, use:
id:'auto'

try the attached code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
<head>
<title></title>
<script type="text/javascript">
function addField(prop){
	var parentElem = document.getElementById(prop.container);
	if( parentElem )
	{
		var d = document.createElement("div");
		var inp="<input type='#TYPE#' name='#NAME#' value='#VALUE#' id='#ID#' /><input type='button' onclick='removeField(this.parentNode)' value='Remove' />";
 
		parentElem.appendChild(d);
		for(var p in prop)
		{
			var t = String(p).toUpperCase()
			switch( t ){
				case "TYPE":
				case "NAME":
				case "ID":
				case "VALUE":
				inp=inp.replace("#"+t+"#",prop[p]);
 
				break;
			}
		}
 
 		d.innerHTML=inp;
 
		if(prop.id=='auto')
		{
			var limit = parentElem.childNodes.length;
			for( var i=0; i < limit; ++i)
			{
				parentElem.childNodes[i].firstChild.id=prop.name+(1+i);
			}
		}
	return d;
	}
return null;
}
 
function removeField( o ){
	o.parentNode.removeChild(o);
}
</script>
</head>
<body>
<span onclick="addField( {container:'containerDiv', type:'text', name:'test', id:'auto', value:''} )">Add</span>
<div id="containerDiv"></div>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
agulaidAuthor Commented:
Perfect, that works fine... Hielo although i dont understand your code and how it works i will have to make do and use it, how long have you been scripting in Javascript?
0
hieloCommented:
about 5y.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.