Question

我有一个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);
    }


}

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

Answer 1

在追加

之前删除它

 ts.find('.form_row').remove();
 ts.appendChild(newdiv);

Answer 2

此修改会添加缺失并删除多余的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/

使用jquery删除div

2 个答案: