Приращение счетчика javascript немного неверно

Question

У меня есть следующий javascript http://jsfiddle.net/847Kf/4/, который содержит счетчик в строках 14 и 36. Код работает, но когда я удаляю элемент, который я добавил и добавляю новый элемент, счетчик продолжается с того места, где он остался , Например: i insert 4 items 1, 2, 3, 4 теперь я удаляю второй элемент и добавляю новый элемент, поэтому у меня будет 1, 3, 4, 5. Как я могу сделать этот счетчик, когда я удаляю элемент счетчик должен сбросить и повторно отобразить значения в соответствии с примером: 1, 3, 4, 5 - удалил элемент, и теперь счетчик должен изменить значения для остального элемента на: 1, 2, 3, 4.

HTML :

<ul class="tags" data-prototype="&lt;div&gt;&lt;label class=&quot; required&quot;&gt;__name__&lt;/label&gt;&lt;div id=&quot;task_tags___name__&quot;&gt;&lt;div&gt;&lt;label for=&quot;task_tags___name___name&quot; class=&quot; required&quot;&gt;Name&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;task_tags___name___name&quot; name=&quot;task[tags][__name__][name]&quot; required=&quot;required&quot; maxlength=&quot;255&quot; /&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;"> 
</ul> 

Javascript:

// setup an "add a tag" link 
var $addTagLink = $('<a href="#" class="add_tag_link">Add a tag</a>'); 
var $newLinkLi = $('<li></li>').append($addTagLink); 

jQuery(document).ready(function() { 
    // Get the ul that holds the collection of tags 
    var $collectionHolder = $('ul.tags'); 

    // add the "add a tag" anchor and li to the tags ul 
    $collectionHolder.append($newLinkLi); 

    // count the current form inputs we have (e.g. 2), use that as the new 
    // index when inserting a new item (e.g. 2) 
    $collectionHolder.data('index', $collectionHolder.find(':input').length); 

    $addTagLink.on('click', function(e) { 
     // prevent the link from creating a "#" on the URL 
     e.preventDefault(); 

     // add a new tag form (see code block below) 
     addTagForm($collectionHolder, $newLinkLi); 
    }); 


}); 

function addTagForm($collectionHolder, $newLinkLi) { 
    // Get the data-prototype explained earlier 
    var prototype = $collectionHolder.data('prototype'); 

    // get the new index 
    var index = $collectionHolder.data('index'); 

    // Replace '$$name$$' in the prototype's HTML to 
    // instead be a number based on how many items we have 
    var newForm = prototype.replace(/__name__/g, index); 

    // increase the index with one for the next item 
    $collectionHolder.data('index', index + 1); 

    // Display the form in the page in an li, before the "Add a tag" link li 
    var $newFormLi = $('<li></li>').append(newForm); 

    // also add a remove button, just for this example 
    $newFormLi.append('<a href="#" class="remove-tag">x</a>'); 

    $newLinkLi.before($newFormLi); 

    // handle the removal, just for this example 
    $('.remove-tag').click(function(e) { 
     e.preventDefault(); 

     $(this).parent().remove(); 

     return false; 
    }); 
} 

Answer 1

Поскольку йо У вас так много id 's/name' s/class 's и т. д., которые включают index. Я бы рекомендовал восстановить список при удалении.

т.е.: -

function regenerateTagList(){ 
    var vals = $('.tags li.tag input').toArray().map(function(v, i) { return v.value; }); 
    $('.tags li.tag').remove(); 
    $('ul.tags').data('index', 0); 
    for(var i = 0; i < vals.length; i++){ 
     addTagForm($('ul.tags'), $newLinkLi); 
     $('.tags li.tag input:last').val(vals[i]); 
    } 
} 

И добавить класс к li для тега, так что вы можете выбрать их из ссылки надстройки: -

var $newFormLi = $('<li></li>', { class:"tag" }).append(newForm); 

затем позвонить после удаления: -

$('.remove-tag').click(function(e) { 
    e.preventDefault(); 

    $(this).parent().remove(); 

    regenerateTagList(); 

    return false; 
}); 

Working Fiddle

Answer 2

Основная проблема заключается в том, как вы считаете элементы.
При создании нового тега вы обновляете количество данных, но при удалении его не замечают.
У вас есть два варианта:

1. Update на удаление значение $collectionHolder.data('index', index - 1)
2. взять количество на каждом творении, не устанавливая его на document ready

Я заметил еще один вопрос с стиранию. Когда вы создаете каждый элемент, вы присоединяете событие delete к каждому .remove-tag в DOM, при 3-м создании первый элемент будет иметь 3 события и 2-й. Два избежать, что я хотел бы сделать что-то вроде:

$('ul.tags').on('click','.remove-tag',function(e){ 
 
    e.preventDefault(); 
 
    $(this).parent().remove(); 
 
})

Что это означает что-то вроде «Посмотрите на йот для ul.tag, и если событие нажатия срабатывает на .remove -tag сделать это ", чтобы он сохранялся и активен для новых созданных тегов.

Answer 3

Эта модификация будет делать изменения без регенерации всего это:

$('.remove-tag').click(function(e) { 
    e.preventDefault(); 
    $(this).parent().remove(); 
    var count = 0; 
    $('.tags li').each(function() { 
     $(this).find('div label').first().text(count); 
     count++; 
    }); 
    return false; 
}); 

Он находит все Ли, а затем находит первую метку в каждой Li и изменяет его переменный счетчик.Это может быть упрощено, если на первой метке был класс под названием «count».