隱藏按鈕，如果它只顯示一次，顯示按鈕，如果它顯示不止一次

Question

我想隱藏刪除按鈕，如果只顯示一次，即如果有1形式隱藏刪除按鈕，如果我克隆表單然後顯示刪除按鈕。

這裏是一個小提琴http://jsfiddle.net/d8Tj8/30/

這裏的HTML

<button class="clone">Clone</button> 
<div id="upload_image_sets"> 
    <div id="clonedInput1" class="clonedInput"> 
    <input type="text" id="upload_image_link_1" class="image" size="36" name="hero_options[upload_image_link_1]" value="' . $hero_options['upload_image_link_1'] . '" /> 
    <input id="show_upload_image_link_button_1" class="button upload_images" type="button" value="Upload Image" /> 
    <div class="actions"> 
     <button class="remove">Remove</button> 
    </div> 
    </div> 

Answer 1

這很簡單，隱藏與CSS的按鈕，顯示它克隆時，將其取下單擊時，只有一個遺體：

CSS

.remove { display: none; } 

JS

$(document).on("click", "button.clone", function(e){ 
    e.preventDefault(); 
    var cloneIndex = $(".clonedInput").length + 1; 
    var new_Input = $(".clonedInput").first().clone(); 
    updateClonedInput(cloneIndex, new_Input); 
    $('.remove').show(); // show the button on cloning 
}); 
$(document).on("click", "button.remove", function(e){ 
    e.preventDefault(); 
    $(this).parents(".clonedInput").remove(); 
    $(".clonedInput").each(function (cloneIndex, clonedElement) { 
     updateClonedInput(cloneIndex + 1, clonedElement); 
    }); 
    if ($('.remove').length == 1) $('.remove').hide(); //remove it if it is the last one when removing 
}); 

http://jsfiddle.net/slash197/d8Tj8/45/

Answer 2

後您克隆形式和點擊刪除按鈕呼叫功能：

function showRemoveButton(){ 
    if ($('.clonedInput').length > 1) //how much forms currently presented. 
     $('.remove').show(); 
    else 
     $('.remove').hide(); 
} 

Answer 3

只是被隱藏了remove按鈕，第一：

<button class="remove" style="display: none">Remove</button> 

然後在clone按鈕，顯示它新的元素：

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

    $(new_Input).find("button.remove").show(); 
}); 

檢查：http://jsfiddle.net/hSWM9/

Answer 4

請檢查更新的jsfiddle。
http://jsfiddle.net/d8Tj8/50/

function displayRemove() { if($('.clonedInput').length === 1) { $('.actions').hide(); } else { $('.actions').show(); } }

即使你有一個以上的形式intially，這種方法是有效的。