仅克隆元素一次并将其删除

Question

我设置了以下JSFiddle来演示我在做什么。如您所见，我有各种输入。每个输入都有一个用于添加额外行的复选框。如果复选框被选中，它应该在选中的输入下方添加一个新的输入。

现在我所做的似乎没有任何问题 - 虽然它可能会有所改进。

目前我遇到问题

$(this).closest(".labelAndInput").remove();

所以每个部分（我给了他们不同的背景颜色来显示这些部分）应该只允许有一个额外的输入。目前，如果我选中该框，取消选中它，然后再次选中它，它会添加第三个输入。

以上问题大概可以通过以下方法解决。如果未选中复选框，则应删除克隆的 div。这是我目前遇到问题的地方。如果未选中复选框，如何删除克隆？它也应该删除与之相关的 div，而不是随机克隆。

感谢任何信息。

谢谢

Answer 1

只需给您的克隆一个 class 即可准确识别它。 jsfiddle

 $(function() {
   $('input:checkbox[name="labelNewline"]').change(function() {
     if ( $(this).is(':checked') ){
        var clone = $(this).parent().siblings(".labelAndInput").first().clone().insertAfter($(this).parent());
        clone.addClass('clone');
     } else {
         $(this).parent().siblings(".clone").remove();
     }
   });
 });

仅克隆元素一次并将其删除

Cloning element only once and removing it

javascript

jquery

clone