Question

我试图隐藏删除按钮，如果它只显示一次，即如果有1个表单隐藏删除按钮，如果我克隆表单然后显示删除按钮。

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

即使您有多个形式，这种方法也可行。

隐藏按钮，如果它只显示一次，显示按钮，如果它显示多次

4 个答案: