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();
});

如何将以下项myli-3, name-3, surname-3, myli-4等的 id 减少一个？

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

}

删除时重新分配多个ID

1 个答案: