2013-07-16 2 views
0

У меня есть 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 и т.д., чтобы уменьшить один?

Я создал этот JSFiddle,

+2

вам необходимо использовать идентификаторы, как это в динамическом списке ли? Возможно, умнее отказаться от идентификаторов и избежать сложного повторного назначения. Вместо этого, как только вы будете готовы что-то сделать с ними, вы можете схватить их всех с помощью jQuery (и при необходимости присвоить им индексы в этой точке). –

+0

Ваша скрипка не работает, потому что '.live()' недоступен в выбранной вами версии jQuery. Вот обновленная версия: http://jsfiddle.net/QZcY5/3/ – nnnnnn

+0

Используйте это для своей функции щелчка: '$ (" body "). On ('click'," .remove ", function() {$ (это) .parent(). remove();}); ' – Johannes

ответ

0

Вы можете попробовать создать пользовательский фильтр 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; 
    } 

} 
+0

Чтобы сохранить «живую» функциональность, вы должны использовать ее для логики щелчка: '$ (« body »). on (' click ', ".remove", function() {$ (this) .parent(). remove();}); 'Таким образом, вы избегаете необходимости отвязывать/перепроверять новые вставки. – Johannes

+0

Согласен, но я бы использовал $ ("ul"), мне нравится пытаться сохранить мою область малой. –

Смежные вопросы