Creating dynamic elements using javascript based on some value in form field
<p>I have created dynamic elements using javascript. These elements are created when i input an <strong>int</strong> value based on the value i get the number of elements.</p>

<p>My problem is that if i change the <strong>int</strong> value more elements are added instead i just want to keep the number of elements which has been entered in the <strong>int</strong> field.</p>

<p>Please help</p>

<p><strong>Javascript</strong> i use</p>

<pre><code>&lt;script type="text/javascript"&gt;
    var inival = 0; // Initialise starting element number
    // Call this function to add textbox
    function addTextBox() {
        for (var i = 1; i &lt;= document.getElementById('unit').value; i++) {

            if(document.getElementById("my"+i+"Div") != null){
                var child = document.getElementById("my"+i+"Div");
                alert(child);
                var parent = document.getElementById("area");
                alert(parent);
                alert(i);
                parent.removeChild(child);

            }

            var newArea = add_New_Element();
            var htcontents = "Unit"+i+": &lt;input type='text' name='synchunit"+i+"' id='unit"+i+"'/&gt;";
            document.getElementById(newArea).innerHTML = htcontents; // You can any other elements in place of 'htcontents' 
        }
    }


    function add_New_Element() {
        inival = inival + 1; // Increment element number by 1
        var ni = document.getElementById('area');
        var newdiv = document.createElement('div'); // Create dynamic element
        var divIdName = 'my' + inival + 'Div';
        newdiv.setAttribute('id', divIdName);
        ni.appendChild(newdiv);
        return divIdName;
    }

    function removeElement(id){
        var child = document.getElementById(id);
        alert(child);
        var parent = document.getElementById('area');
        parent.removeChild(child);
        return true;              
    }

&lt;/script&gt;
</code></pre>

<p><strong>The way i call it</strong></p>

<pre><code>&lt;tr class="trlist1"&gt;
    &lt;td style="border:0;"&gt;
        &lt;input name="projectunit" id="unit" onblur="addTextBox();"/&gt;
    &lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td style="border:0;" align="center"&gt;
        &lt;div id='area'&gt;
        &lt;/div&gt;      
    &lt;/td&gt;
&lt;/tr&gt;
</code></pre>
