刪除任何元素，重新分配計數值

Question

對於這個神祕的標題很抱歉，很難形容！

我使用下面的腳本添加一行到我的形式單擊按鈕時：

$(document).ready(function() { 
     $('#btnAdd').click(function() { 
     var num  = $('.clonedInput').length; 
     var newNum = new Number(num + 1); 

     var newElem = $('#input' + num).clone().attr('id', 'input' + newNum); 

     newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum); 
     $('#input' + num).after(newElem); 
     $('#btnDel').attr('disabled',''); 

     if (newNum == 5) 
      $('#btnAdd').attr('disabled','disabled'); 
     }); 

     $('#btnDel').click(function() { 
     var num = $('.clonedInput').length; 

     $('#input' + num).remove(); 
     $('#btnAdd').attr('disabled',''); 

     if (num-1 == 1) 
      $('#btnDel').attr('disabled','disabled'); 
     }); 

     $('#btnDel').attr('disabled','disabled'); 
    }); 

這工作絕對沒問題，但它不是很人性化的，你只能刪除最後添加行。假設我想刪除之前添加的一行，我將不得不刪除我從那時起所做的一切。

如何刪除任何行，並同時將計數值重新分配給其他行，以便計數仍然是順序的（即Row1，Row2，Row3等，而不是Row1，Row5，Row8）？

Answer 1

我不得不做類似的事情在不久前

基本上我已刪除的行即數量。 Row3，然後遍歷剩餘的行更新其值。所以ROW4成爲ROW3等

我用這樣的

var last_val = //get the last value of the rows so you know when to stop 

    //knock off the Row part of the id and parses as an integer 
    var pos = parseFloat(row_id.slice(3)) 

    var next_val = position+1; 
    var prev_val = position; 

    while(next_val<=last_val){ 
     next_selector = "#Row"+next_val; 
     prev_id = "Row"+prev_val; 
     $(next_selector).attr("id",prev_id); 
     next_val++; 
     prev_val++; 
    } 

可能有更好的方法來做到這一點，但是這爲我工作的CMS允許頁面從的中間被刪除列表，然後更新行編號。

Answer 2

我建議你不要爲元素明確設置一個id。相反，您可以使用jQuery強大的選擇器來獲取元素的位置。

這是一個基於通用html結構的示例。發佈你自己的html給你更多的細節。

$('.btnDel').click(function() { 
    var num = $(this).parent().prevAll().size(); 

    // this points to delete link. 
    // The previous element is the content element 
    $(this).prev().remove(); 

    $('#btnAdd').attr('disabled',''); 

    if (num-1 == 1) 
      $(this).attr('disabled','disabled'); 
    }); 

<div class='elem'> 
    <span class='content'>....</span> 
    <a class='btnDel' href='#'>Delete</a> 
</div> 

Answer 3

爲什麼你甚至會向行添加ID？請記住，83％的jQuery是「查詢」 - 使用選擇器來獲得你想要的元素。

Answer 4

我發佈了一個demo here（它在IE中看起來不太好，因爲它的浮點數，但我只是想以此爲例來幫助）。我不知道你是如何處理收集表單數據的，所以我確實包括重新編號克隆的輸入ID。

CSS

form { width: 400px; margin: 0 auto; line-height: 30px; } 
input { float: right; } 

HTML

<form> 
<div class="main"> 
Name: <input type="text" /><br> 
Title: <input type="text" /><br> 
Company: <input type="text" /><br> 
Location: <input type="text" /><br> 
</div> 
Additional information: <input id="btnAdd" type="button" value="Add More"/> 
<div id="addFields"></div> 
</form> 

腳本

$(document).ready(function(){ 
$('#btnAdd').click(function(){ 
    // inputs reversed because of the float right 
    var newInput = '<div class="clonedInput">Additional Field <span></span>: ' + 
    '<input type="button" class="btnDel" title="Delete this field" value="X"><input type="text" /></div>'; 
    $(newInput).appendTo('#addFields'); 
    // disable add button if there are 5 additional fields 
    if ($('.clonedInput').length == 5) { 
    $('#btnAdd').attr('disabled','disabled'); 
    } 
    renumber(); 
}) 
// Delete input field 
$('.btnDel').live('click',function(){ 
    $('#btnAdd').attr('disabled',''); 
    $(this).parent().remove(); 
    renumber(); 
}) 
}) 
// This function adds the additional field number and ID for each clonedInput field 
function renumber(){ 
$('.clonedInput').each(function(i){ 
    $(this).find('span').html('#' + (i+1)); 
    // the code below will change the ID of the input, in case you collect your data based on the ID. 
    $(this).find('input[type=text]').attr('id', 'input' + (i+1)); 
}) 
}