jquery remove clone on second click?

Question

I've been making an app that adds tables based off the number you type in one text box. What I'm trying to figure out it how after each time the 'Go' button is clicked a second time, the previous tables that I generated disappear. So far I can add tables but they just keep cloning.

I've tried to use the 'seen' object to remove previous tables, but couldn't figure out how to actually get it working with my code. I looked up .remove as well but couldn't figure out where exactly to work it in my code.

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, so after looking into it a bit more rather than find a solution for your code I've tried to adapt your code so that it matches what you're trying to do better.

I created a http://jsfiddle.net/j1sqej3w/ for you to do (What I believe) you want doing.

The jQuery I used was:

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

Notice the $("tr").slice(2).remove(); which keeps the first two table rows intact and the original order with the others disappearing the next time a value is added.

Doing tasks such as removing enter to add table-rows can be accomplished by transforming <form> into <div> as in http://jsfiddle.net/66x3n11f/

I hope i'm on the right-track. Let me know if i misunderstood.