jquery Klon beim zweiten Klick entfernen?

Question

Ich habe eine App erstellt, die Tabellen basierend auf der eingegebenen Zahl in einem Textfeld hinzufügt. Was ich versuche herauszufinden, wie nach jedem Klick auf den "Go" -Button die vorherigen Tabellen, die ich erzeugt habe, verschwinden. Bis jetzt kann ich Tabellen hinzufügen, aber sie klonen einfach weiter.

Ich habe versucht, das "gesehen" -Objekt zu verwenden, um vorherige Tabellen zu entfernen, konnte aber nicht herausfinden, wie es tatsächlich mit meinem Code funktioniert. Ich schaute nach oben. Entferne auch, aber konnte nicht herausfinden, wo genau es in meinem Code zu arbeiten.

Live-Version: 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, also nach etwas mehr in sie suchen, anstatt eine Lösung für Ihren Code zu finden habe ich versucht, den Code so anzupassen, dass es passt zu dem, was Sie besser machen möchten.

Ich habe eine http://jsfiddle.net/j1sqej3w/ für Sie zu tun (Was ich glaube), die Sie tun möchten.

Die jQuery ich verwendet wurde:

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

Beachten Sie die $("tr").slice(2).remove();, die die ersten beiden Tabellenzeilen intakt und die ursprüngliche Reihenfolge mit den anderen verschwindet das nächste Mal hält ein Wert hinzugefügt wird.

tun Aufgaben wie das Entfernen von eingeben Tabellenzeilen hinzufügen können durch <form> in <div> wie in http://jsfiddle.net/66x3n11f/

Umwandlung erreicht werden, ich hoffe ich bin auf der rechten Spur. Lass es mich wissen, wenn ich es falsch verstanden habe.