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.
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?
agulaidAuthor Commented:
Im assuming its something like this:


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

Open in new window

Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

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

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

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?
hieloCommented:
about 5y.
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.