jquery 두 번째 클릭시 복제본을 제거 하시겠습니까?

Question

나는 하나의 텍스트 상자에 입력 한 숫자에 따라 표를 추가하는 앱을 만들었습니다. 내가 '계산'버튼을 두 번 클릭 할 때마다 이전에 생성 된 테이블이 사라지는 방식을 알아 내려고 노력하고 있습니다. 지금까지 테이블을 추가 할 수 있지만 복제 만 계속합니다.

'seen'개체를 사용하여 이전 테이블을 제거하려고 시도했지만 실제로 코드를 사용하는 방법을 알 수 없습니다. 나는 또한 .remove를 찾았지만 정확히 어디에서 코드를 작동 시킬지 알 수 없었다.

라이브 버전 : http://codepen.io/BabinecJ/pen/BRjJbw

$('[name="cand_no" ]').on('change', function() { 
 
    // Not checking for Invalid input 
 
    if (this.value != '') { 
 
    var val = parseInt(this.value, 10); 
 
    ///Click add button add count number + table 
 

 
    $(function() { 
 
     $('#add').bind('click', function() { 
 
     $('#mytbody'); 
 
     var count = $('#mytbody').children('tr').length; 
 
     $('#counter').html(count); 
 

 
     ///Adding coder name 
 
     var name = $("#tname").val(); 
 
     $('#aname').html(name); 
 
     }); 
 
    }); 
 
    
 
    /// Figuring out way to disable enter key being pressed 
 
    $(document).ready(function() { 
 
     $('cand_no').keydown(function(event) { 
 
     if (event.keyCode == 13) { 
 
      event.preventDefault(); 
 
      return false; 
 
     } 
 
     }); 
 
    }); 
 

 
    for (var i = 0; i < val; i++) { 
 
     // Clone the Template 
 
     var $cloned = $('.template tbody').clone(); 
 

 
     // For each number added append the template row 
 
     $('#studentTable tbody').append($cloned.html()); 
 
    } 
 
    } 
 

 
    var seen = {}; 
 
    $('a').each(function() { 
 
    var txt = $(this).text(); 
 
    if (seen[txt]) 
 
     $(this).remove(); 
 
    else 
 
     seen[txt] = true; 
 
    }); 
 
});

.template { 
 
    border-style: solid; 
 
} 
 

 
#cand_no { 
 
    background-color: red; 
 
} 
 

 
#add { 
 
    color: blue; 
 
    position: absolute; 
 
    margin-left: -900px; 
 
    margin-top: -35px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p> 
 
    <label><strong>Number of Rows</strong></label> 
 
    <label><input name="cand_no" type="text" placeholder="Type Number of Rows" id="cand_no" /></label> 
 

 
    <div style="float: right; width: 40px"> 
 
    <button id="add">GO!</button> 
 
    </div> 
 
    <div class="clear"></div> 
 
</p> 
 
<p> 
 
    <label><strong>Your Name</strong></label> 
 
    <label><input name="tname" id="tname" type="text" placeholder="Type Your Name" /></label> 
 
    <div class="clear"></div> 
 
</p> 
 

 
<div class="cand_fields"> 
 
    <table id="studentTable" "txt" width="630" border="solid"> 
 
    <tbody id="mytbody"> 
 
     <tr> 
 
     <td> 
 
      <p>Number of rows: 
 
      <p id="counter"> 
 
       </span> 
 
      </p> 
 
     </td> 
 

 
     <td id="tname" width="0">Name 
 
      <p id="aname"> 
 
      </span> 
 
      </p> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td><input name="tname" type="text" placeholder="" required="required" id="tname" /></td> 
 

 
     <td><input name="cand_pos" type="text" placeholder="" required="required" /></td> 
 
     </tr> 
 
    </table> 
 
</div> 
 

 
<div class="template" id=".template" style="display:none "> 
 
    <table> 
 

 

 

 

 

 
    <tr> 
 
     <td><input name="cand_name" type="text" placeholder="" required="required" id="count" /></td> 
 

 
     <td><input name="cand_pos" type="text" placeholder="" required="required" /></td> 
 
    </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

Answer 1

좋아, 그것으로 찾고 조금 더보다는 코드에 대한 해결책을 찾을 후 나는 코드를 적응하기 위해 노력했습니다, 그래서 있도록 당신이 더 잘하려고 노력하는 것과 일치합니다.

당신이하고 싶은 (내가 생각하는) 당신이하고 싶은 http://jsfiddle.net/j1sqej3w/을 만들었습니다. JQuery와 내가 사용

했다 :

$(document).ready(function() { 
    $("form").submit(function() { 
    var times = $("input").val(); 
    $("tr").slice(2).remove(); 
    for(var i=0; i < times; i++){ 
     $("table").append("<tr><td>row 1</td><td>row 2</td></tr>"); 
    } 
    return false; 
    }); 
}); 

공지 손상과 값이 추가되어 다음 번에 사라지고 다른 사람과 원래 순서 처음 두 테이블 행을 유지하는 $("tr").slice(2).remove();. 같은 테이블 행을 추가 입력 제거하는 등

수행 작업은 내가 오른쪽 궤도에있어 희망 http://jsfiddle.net/66x3n11f/

같이 <div>에 <form> 변환하여 수행 할 수 있습니다. 내가 오해 한 경우 알려줘.