删除克隆元素并添加新元素

Question

我有两个问题，无法找到解决方案：

下面的代码只是一个展示我观点的例子。

＆＃13;

＆＃13;

$(document).ready(function() {
  $('#val1').val(1);
  $('#val2').val(2);
  $('#val3').val(3);
  var clone = $('#form2.form2:first').clone().appendTo($('#form2'));
  clone.find('#val1').val(11);
  clone.find('#val2').val(12);
  clone.find('#val3').val(13);
  var form1_clone = $('#form1.form1:first').clone().appendTo($('#form1'));
  form1_clone.find('#val1').val(21);
  form1_clone.find('#val2').val(22);
  form1_clone.find('#val3').val(23);
});

＆＃13;

<div id="form1">
  <table class="form1">
    <thead>
      <tr>
        <td>Val 1</td>
        <td>Val 2</td>
        <td>Val 3</td>
      </tr>
    </thead>
    <tbody id="form2">
      <tr class="form2">
        <td>
          <input type="text" name="val1" id="val1" />
        </td>
        <td>
          <input type="text" name="val2" id="val2" />
        </td>
        <td>
          <input type="text" name="val3" id="val3" />
        </td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;

Fiddle

问题1：

如何从克隆的form2中删除克隆元素form1？

问题2：

在克隆元素form2中添加新克隆form1的方法是什么，并用值31,32,33填充它们

Answer 1

对于这个克隆业务，最好有一个干净的模板来克隆，所以我建议这样做：

• 创建一个不可见的（final/private/equals()/hashCode() methods.）模板
• 最初克隆
• 然后用它来克隆它的一部分（form1 / form2）

另外，正如评论中所提到的，最好使用类而不是ID。

display: none

$(document).ready(function() {
var template = $('.template');

// Clone the main template
var tpl_clone = template.clone().show().insertAfter($('.template'));
tpl_clone.find('.val1').val(1);
tpl_clone.find('.val2').val(2);
tpl_clone.find('.val3').val(3);

// Add one more form2 to the cloned template
var form2_clone = template.find('.form2').clone().appendTo(tpl_clone.find('.wrap-form2'));
form2_clone.find('.val1').val(11);
form2_clone.find('.val2').val(12);
form2_clone.find('.val3').val(13);

//Q: How I can remove cloned element form2 from cloned form1?
//A: Don't insert it, clone from the clean template
var form1_clone = template.find('.form1:first').clone().appendTo(tpl_clone);
form1_clone.find('.val1').val(21);
form1_clone.find('.val2').val(22);
form1_clone.find('.val3').val(23);

//Q: What is the way to add new clones form2 in cloned element 
//   form1 and fill them with values 31, 32, 33
//A: Clone from the template and append to the form2 wrapper
var form2_clone2 = template.find('.form2').clone().appendTo(form1_clone.find('.wrap-form2'));
form2_clone2.find('.val1').val(31);
form2_clone2.find('.val2').val(32);
form2_clone2.find('.val3').val(33);
});