jquery - 删除时重新分配多个 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();
});

如何使以下项目等的idmyli-3, name-3, surname-3, myli-4减少一个？

我创建了这个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; 
   }

}