<html>
<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 d=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 = "Label "+num+" :";
newdiv.innerHTML+="<input type='text' name='quantity"+num+"' onBlur='countAll(this)' /> ";
newdiv.innerHTML+="<input type='hidden' name='hid"+num+"' value='' /> ";
newdiv.innerHTML+="<input type='button' name='del' value='Delete' onclick=\"removeEvent(\'"+divIdName+"\')\" >";
ni.appendChild(newdiv);
document.getElementById('quantity'+num).focus();
}
function trim(val)
{
var str = val.value;
while(str.indexOf(' ')!=-1 && str.indexOf(' ')==0)
{
str = str.substr(1);
}
while(str.lastIndexOf(' ')!=(str.length-1) && str.lastIndexOf(' ')==str.length-1)
{
str = str.substr(0,str.length-1);
}
val.value=str;
}
function isnumber(num1)
{
var re = /^[0-9-'.']*$/;
if (!re.test(num.value))
{
alert("Value must be all numberic charcters, non numeric's removed from field!");
num.value = num.value.replace (/[^0-9-'.']/g,"");
}
if( num.value<0)
{ alert("Value must be greater than 0 ");
forms1.num1.focus();
}
<!--fields.value = fields.value.replace(fields.value,toFixed( fields.value,2));-->
<!--form1.num=RoundToNdp (num,2);-->
}
function countAll(val)
{
trim(val);
var isNumber = isNaN(val.value) ? 0 : 1;
if(val.value.length<=0) isNumber=0;
var num=val.name.substr(8);
var hval=document.getElementById('hid'+num).value;
if(isNumber == 1 && val.value!=hval)
{
forms1.tot.value=parseInt(forms1.tot.value )+parseInt(val.value);
document.getElementById('hid'+num).value=val.value ;
if(hval!='') forms1.tot.value-=parseInt (hval);
}
else
{
if(hval!='' && val.value!=parseInt(hval))
{
forms1.tot.value=parseInt(forms1.tot.value )-parseInt(hval);
document.getElementById ('hid'+num).value=0;
if(isNaN(val.value)) alert("Please Enter value");
val.focus();
}
else
{
if(hval!=val.value)
{
alert("Please Enter value");
val.focus ();
}
else
document.getElementById('del').focus();
}
}
}
function removeEvent(divNum)
{
var d = document.getElementById('myDiv');
var olddiv = document.getElementById(divNum);
var DivLoc = divNum.search(/Div/i);
var num = divNum.substring(2,DivLoc);
var txtCtrl = 'quantity'+num;
var val = document.getElementById(txtCtrl);
if(val.value.length>0)
forms1.tot.value=parseInt(forms1.tot.value)-parseInt(val.value);
//alert(d);
d.removeChild(olddiv);
}
//-->
</script>
</head>
<body>
<form name="forms1">
<input type="hidden" value="0" id="theValue" />
<p><input type="button" value="add some elements" onclick="addEvent();"></p>
<p>Total:<input type="label" readonly value="0" name="tot"></p>
<div id="myDiv"> </div>
</form>
</body>
</html>
the above is the code. the number of the lables should be sequential, instead the number of the deleted row is missing.
