Question

this is almost right, it is not a very complicated question…

I have a <ul> that I can add and delete <li>‘s from.

Working example is here.

http://jsfiddle.net/6ELzf/1/

When I add or delete a <li>, I would like to reset the span.number’s…

So if I have 3 list items:

<ul>
  <li><span class="number">1</span></li>
  <li><span class="number">2</span></li>
  <li><span class="number">3</span></li>
</ul>

And I delete the first one, I would like it to display:

<ul>
  <li><span class="number">1</span></li>
  <li><span class="number">2</span></li>
</ul>

Not:

<ul>
<li><span class="number">2</span></li>
<li><span class="number">3</span></li>
</ul>

Any thoughts on how to update this…

function index_list() {
  $("#thelist > li").each(function(i){
      $(this).find(".number").html((i + 1));
    });
}

Answer 1

Updated your code @ http://jsfiddle.net/6ELzf/2/

Your hiding the li your index_list() can still find it when it does its reindexing..

function index_list() {
 $("#thelist > li").each(function(i){
     $(this).find(".number").html((i + 1));
   });
}

var batch = $("li.foo").clone();


$("#add").live('click', function(e) {
  e.preventDefault();     
   $('#thelist').append(batch.clone());
  index_list();
});

$('.remove').live('click', function() {
   var fadeit = $(this).parents('.foo');
   $(fadeit).fadeOut(400, function() {
      $(this).remove();
      index_list();
   });
 });