jquery 第二次点击删除克隆？

Question

我一直在制作一款应用程序，它根据您在一个文本框中键入的数字添加表格。我想弄清楚的是，每次单击 'Go' 按钮后，我之前生成的表格如何消失。到目前为止，我可以添加表格，但它们一直在克隆。

我曾尝试使用 '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(); 保持前两行 table 不变，并且在下次添加值时原始顺序与其他行一起消失。

执行删除输入以添加 table 行等任务可以通过将 <form> 转换为 <div> 来完成，如 http://jsfiddle.net/66x3n11f/

我希望我走在正确的轨道上。如果我误解了请告诉我。

jquery 第二次点击删除克隆？

jquery remove clone on second click?

jquery

clone