根據表單字段中的某些值使用JavaScript創建動態元素

Question

我已經使用JavaScript創建了動態元素。 當我根據獲取元素數量的值輸入int值時，就會創建這些元素。

我的問題是，如果我更改int值，則會添加更多元素，而我只想保留在int字段中輸入的元素數。

請幫忙

我使用的Javascript

<script type="text/javascript">
    var inival = 0; // Initialise starting element number
    // Call this function to add textbox
    function addTextBox() {
        for (var i = 1; i <= 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+": <input type='text' name='synchunit"+i+"' id='unit"+i+"'/>";
            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;              
    }

</script>

我叫它的方式

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

Answer 1

我自己解決了

剛剛添加

function addTextBox() {
    document.getElementById("area").innerHTML = '';
    for (var i = 1; i <= document.getElementById('unit').value; i++) {

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

document.getElementById（“ area”）。innerHTML ='';

這行只是重置div。