Question

我创建了一个包含克隆和删除按钮的表单，如果单击克隆它会克隆表单，当我单击删除它时删除该表单，到目前为止一直很好。

现在对于棘手的部分，我认为它是......

当我点击删除时，我希望删除div但是只剩下一个div，我不希望能删除它

这是我到目前为止所获得的一个问题http://jsfiddle.net/vs8p5/5/

这是jquery

function updateClonedInput(index, element) {
$(element).appendTo("body").attr("id", "clonedInput" +  index);
$(element).find(">:first-child").attr("id", "show_upload_image_link_" + index);
$(element).find(">:first-child").attr("name", "kandibox_theme_hero_options[show_upload_image_link_" + index + "]");
$(element).find(">:first-child").attr("value", "<?php echo $hero_options['show_upload_image_link_" + index + "']; ?>");
$(element).find(">:first-child").next().attr("id", "show_upload_image_link_button_" + index);
}

$(document).on("click", "button.clone", function(){
    var cloneIndex = $(".clonedInput").length + 1;
    var new_Input = $(this).parents(".clonedInput").clone();
    updateClonedInput(cloneIndex, new_Input);    
});
$(document).on("click", "button.remove", function(){
    $(this).parents(".clonedInput").remove();

    $(".clonedInput").each( function (cloneIndex, clonedElement) {
    updateClonedInput(cloneIndex + 1, clonedElement);
})
});

Answer 1

http://jsfiddle.net/vs8p5/20/

$(document).on("click", "button.remove", function(){

    if($('.clonedInput').length > 1) {
        $(this).parents(".clonedInput").remove();

        $(".clonedInput").each( function (cloneIndex, clonedElement) {
            updateClonedInput(cloneIndex + 1, clonedElement);
        })
    }

});

Answer 2

当只剩下一个按钮时，下面会隐藏按钮，而不仅仅是禁用删除按钮。

http://jsfiddle.net/6eaQ2/

我在button.remove点击事件

中添加了以下内容

if ($('.clonedInput').length < 2)
{
    $('button.remove').hide();
}

以及下面的button.clone点击事件

$('button.remove').show();

更新： http://jsfiddle.net/6eaQ2/10/

下面添加到css

.remove{ display: none; }

删除克隆的表单，但保留最后一个表单

2 个答案: