删除时重新分配多个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开始就不再受欢迎了。

小提琴

试一试

 $(".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; 
   }

}