0

我有一个 HTML 文本框，用户将在其中输入所需的表单数量，并且该数量的表单将显示给用户。

<label>No of Applicant</label><input type="text" class="form_input" id="applicant" value="1" onchange="addevent();"/></div>

功能addevent()是：

function addevent(){
var x=document.getElementById('applicant').value;

for(i=1;i<x;i++)
{
    var ts=document.getElementById('holder');
    var newdiv = document.createElement('div');

    var p=i+1;            // Form 1 is default, must exist
    if(p==1)
    {
        var no = p+' st';
    }
    else if(p==2)
    {
        var no = p+' nd';
    }
    else if(p==3)
    {
        var no = p+' rd';
    }
    else
    {
        var no = p+' th';
    }

        newdiv.innerHTML='<div class="form_row"><p>New Form number'+no+'</p></div>';
        ts.appendChild(newdiv);
    }


}

上面的脚本运行良好。但是如果用户重新输入他想要的表格，表格的数量会添加到之前的表格中。即如果之前他输入了 2 个表格，那么他重新输入了 3 个表格，现在表格总数为 5。所以我想知道有什么方法可以删除在创建新 div 之前创建的 div。

4

2 回答 2

1

在追加之前删除它

 ts.find('.form_row').remove();
 ts.appendChild(newdiv);
于 2013-07-23T10:48:01.910 回答
1

此修改添加了缺失并删除了多余的 div：

function addevent() {
    var x = parseInt(document.getElementById('applicant').value, 10);
    if (x<1) { x=1; }
    var ts = document.getElementById('holder');
    var divs = $(ts).children('.form_row');
    if (x < divs.length) {
        divs.each(function (i) {
            if (i >= x) {
                $(this).remove();
            }
        });
        return;
    }
    for (i = divs.length; i < x; i++) {
        var newdiv = document.createElement('div');
        var p = i + 1; // Form 1 is default, must exist
        /*if (p == 1) {
            var no = p + ' st';
        } else*/
        if (p == 2) {
            var no = p + ' nd';
        } else if (p == 3) {
            var no = p + ' rd';
        } else {
            var no = p + ' th';
        }
        newdiv.className = 'form_row';
        newdiv.innerHTML = '<p>New Form number' + no + '</p>';
        ts.appendChild(newdiv);
    }
}

http://jsfiddle.net/BqFEN/4/

于 2013-07-23T11:14:33.743 回答