2016-06-07 81 views
1

所以我在左邊有一個大按鈕,右邊有一個表格。當您單擊該按鈕時,最多可創建5個附加表單。它還更新了ID和風味檔案#文本。使用刪除按鈕單擊克隆div - 但是,如何隱藏初始克隆上的刪除按鈕?

它仍然有點bug,並尋找一些幫助整理出來,因爲即時通訊不是最好的。

問題1:如果您創建5個額外的克隆,然後刪除它們。當你再次創建它們時,它將它們標記爲#7#8#9 - 由於只允許有6種形式。我需要這個號碼只顯示1-6,而不是上面或下面。我也想爲id做同樣的事情。

問題2:另一個問題我是我想刪除「刪除鏈接」風味曲線#1(第一種形式)。因爲如果所有表格都被刪除了,那麼就沒有什麼可以克隆的了。

感謝您的幫助!

JS FIDDLE

var cloneIndex = 1; 
var clones_limit = 5; 
var cloned_nbr = $(".clonedInput").length-1; //Exclude Default (first) div 

function clone() 
{ 
    if(cloned_nbr<clones_limit) 
    { 
    cloneIndex++; 
    cloned_nbr++; 

    var new_clone = $(".clonedInput").first().clone(); 

    new_clone.attr("id", "clonedInput" + cloneIndex); 
    new_clone.find(".label-nbr").text(cloneIndex); 
    new_clone.find(".category").attr("id","category"+cloneIndex); 
    new_clone.show(".remove").attr("id","remove"+cloneIndex); 
    new_clone.on('click', 'button.clone', clone); 
    new_clone.on('click', 'button.remove', remove); 

    $("#formy").append(new_clone); 
    } 
} 
function remove(){ 
    if(cloneIndex>1){ 
    $(this).parents(".clonedInput").remove(); 
    cloned_nbr--; 
    } 
} 
$(".clone").on("click", clone); 

$(".remove").on("click", remove); 

回答

1

我改變了一下。它應該使用適當的索引並刪除按鈕!

function getFreeIds() { 
    var used = $('.clonedInput').find('.label-nbr').map(function(i, v) { 
      return parseInt(v.innerText) 
     }).get(); 
    return allowed.filter(function (i) {return used.indexOf(i) === -1}); 
} 

它做你所需要的。

http://jsfiddle.net/tfFLt/1921/

+0

刪除2項不工作http://jsfiddle.net/tfFLt/ 1919/ – SamGhatak

+0

@SamGhatak錯誤的鏈接隊友。 – wot

+1

哈哈沒有問題...你編輯它4-5次我猜!感到困惑,歡呼聲 – SamGhatak

1

添加,檢查可拆卸div的現在的數目的函數。如果其超過1,顯示刪除按鈕,否則不執行:

function handleRemoveButton(){ 
    var numItems = $('.clonedInput').length; 
    if(numItems<=1){ 
     $(".remove").hide(); 
    } 
    else{ 
     $(".remove").show(); 
    } 
} 

三而竭稱之爲:在最後的clone(){}remove()一次在$(document).ready();一次。

+0

不知道如何添加到我的預先存在的代碼是誠實的。只是試圖沒有運氣。 – Patrick

+0

你可以用你的改變重新發布我的JS小提琴嗎? :) – Patrick

+0

好吧,讓我把工作小提琴 – SamGhatak

1

寫一個重新排列功能更新內容,並從當你克隆一個項目或刪除它

function rearrange(){ 
    var count = 1; 
    var totalCount = $(".clonedInput").length; 
    $(".clonedInput").each(function(){ 
     $(this).attr("id", "clonedInput"+count).find(".label-nbr").text(count).end(). 
     find(".category").attr("id","category"+count).end().find(".remove").toggle(totalCount!=1).attr("id","remove"+count).on("click", remove); 
     count++; 
    }); 
} 

叫它檢查的jsfiddle在:http://jsfiddle.net/tfFLt/1922/

+0

歡迎!它對你的幫助很大。 –