Клонирующий элемент только один раз и его удаление

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