克隆元素只需删除一次

Question

我已设置以下JSFiddle来展示我正在做的事情。如你所见，我有各种输入。每个输入都有一个复选框，用于添加其他行。如果选中了复选框，则应在选中的输入下添加新输入。

现在，我似乎没有任何问题地做到这一点 - 尽管它可能会得到改善。

目前我遇到了

的问题

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

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

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

任何赞赏的信息。

由于

Answer 1

只需给你的克隆一个类来确切地识别它。的 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();
     }
   });
 });