jquery를 사용하여 div 제거

Question

사용자가 필요한 양식 수를 입력하고 양식 수가 사용자에게 표시되는 HTML 텍스트 상자가 있습니다.

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); 
    } 


} 

그리고 위의 스크립트는 잘 작동 :

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

기능 addevent()입니다. 그러나 사용자가 원하는 양식을 입력하면 양식 수가 이전 양식에 추가됩니다. 예를 들어 이전에 그가 2 개의 양식을 입력했다면 3 개의 양식을 입력하고 총 양식 수는 이제 5가됩니다. 그래서 새로운 div를 작성하기 전에 작성된 div를 제거 할 수있는 방법이 있는지 알고 싶습니다.

Answer 1

그 전에이 수정이 없거나 추가하고 중복 된 div를 제거

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

Answer 2

추가 제거 :

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/