jquery supprimer un clone en deuxième clic?

Question

J'ai créé une application qui ajoute des tables basées sur le nombre que vous tapez dans une zone de texte. Ce que j'essaie de comprendre comment, après chaque fois que l'on clique sur le bouton 'Go', les tables précédentes que j'ai générées disparaissent. Jusqu'à présent, je peux ajouter des tableaux, mais ils continuent à cloner.

J'ai essayé d'utiliser l'objet 'seen' pour supprimer les tables précédentes, mais je n'ai pas compris comment l'utiliser avec mon code. J'ai regardé vers le haut .Remove aussi bien mais n'ai pas pu savoir exactement où travailler dans mon code.

version live: 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

Ok, donc après avoir regardé un peu plus au lieu de trouver une solution pour votre code que j'ai essayé d'adapter votre code afin qu'il correspond à ce que vous essayez de faire mieux.

J'ai créé un http://jsfiddle.net/j1sqej3w/ pour que vous fassiez (ce que je crois) que vous voulez faire.

Le jQuery j'ai utilisé était:

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

Notez que le $("tr").slice(2).remove(); qui maintient les deux premières lignes de la table intacte et l'ordre original avec les autres disparaissent la prochaine fois qu'une valeur est ajoutée.

tâches telles que la suppression Faire entrer ajouter la table-lignes peuvent être réalisées en transformant <form> en <div> comme dans http://jsfiddle.net/66x3n11f/

J'espère que je suis sur la bonne voie. Faites-moi savoir si j'ai mal compris.