刪除時重新分配多個ID

Question

我有下面的HTML。

<ul> 
    <li id="myli-1"> 
     <input id="name-1" /> 
     <input id="surname-1" /> 
     <span class="remove">X</span> 
    </li> 
    <li id="myli-2"> 
     <input id="name-2" /> 
     <input id="surname-2" /> 
     <span class="remove">X</span> 
    </li> 
    <li id="myli-3"> 
     <input id="name-3" /> 
     <input id="surname-3" /> 
     <span class="remove">X</span> 
    </li> 
    <li id="myli-4"> 
     <input id="name-4" /> 
     <input id="surname-4" /> 
     <span class="remove">X</span> 
    </li>  
</ul> 

用戶與點擊刪除第二項目第二X

$(".remove").live('click', function() { 
     $(this).parent().remove(); 
}); 

我怎樣才能讓ID S的以下項目myli-3, name-3, surname-3, myli-4等可以降低1？

我創造了這個JSFiddle，

Answer 1

你可以嘗試創建一個自定義過濾器的jQuery。順便說.live（）是因爲1.7

Fiddle

棄用嘗試

$(".remove").click(function() 
{ 
     $(this).parent().remove(); 
     refreshIndex(); 
}); 

function refreshIndex() 
{ 
    $('ul li').filter(hasIdWithIndex).each(updateIdWithIndex); 
    $('ul li input').filter(hasIdWithIndex).each(updateIdWithIndex); 

    function hasIdWithIndex() 
    { 
    return this.id.search(/\d$/) != -1; 
    } 

    function updateIdWithIndex() 
    { 
     var $this = $(this); 
     var id  = this.id; 
     var index = $this.closest('li').index(); 

     id   = this.id.substring(0, id.length -1); 
     this.id  = id + index; 
    } 

}