CODEWITHSUNDEEP
javascriptjquery
jQueryster
jQueryster

Reputation: 169

How to re-number a list after removing the unwanted row using jQuery?

My code creates paragraphs by clicking on the "+" symbol and can also delete by clicking the "X". Every time a paragraph or row is added, the number ascends. When I remove a paragraph or row, that number gets deleted, the way it should. However, I would like for it to re-number automatically. For example: If I create "4" paragraphs, it would list 1, 2, 3, 4 and remove let's say the #2 paragraph, then it looks like this 1, 3, 4 and I need it to perform like this 1, 2, 3. I've been unsuccessful in finding a solution. Anybody familiar with this? This is using jQuery.

Check out this link to see the code: http://jsfiddle.net/jkcLe6xp/3/

HTML

<a href="#" class="create">Create a paragraph</a>
<ul class="p-wrap"></ul>

jQuery

var _pId = 1;
var ul = $('.p-wrap');
var li = $('<li></li>').attr({'id':'p_cont_'+ _pId});
var num = $('<span></span>').attr({'id':'num_cont_'+_pId}).text(_pId).addClass('num-cont');
var para = $('<div></div>').attr({'id':'para_cont_' + _pId}).text('Paragraph goes here...').addClass('para-cont');
var actionContainer = $('<div></div>').addClass('action-cont');
var addPara = $('<a href="#"></a>').attr({'id':'add_para_' + _pId}).text('+').addClass('add-para');
var delPara = $('<a href="#"></a>').attr({'id':'del_para_'+_pId}).text('x').addClass('del-para');

$('a.create').on('click', function(){ 
      actionContainer.append(addPara, delPara);
     li.append(num, para, actionContainer);
     ul.append(li);
     $(this).hide();
    _pId++;
});

$('ul.p-wrap').on('click', '.add-para, .del-para', function(event){

 if($(this).hasClass('add-para')){

       var arr = [];
       var clone = $(li).clone().attr({"id":"p_cont_" + _pId}).insertAfter($(this).parent().parent());

       clone.find('span').attr({"id":"num_cont_" + _pId}).text(_pId);         

       $('ul.p-wrap li span').each(function() {
          arr.push(parseInt($(this).text(), 10));
       });      

       arr.sort(numOrdDesc);

       $('ul.p-wrap li span').each(function() {
           $(this).text(arr.pop());
       });              

     _pId++;         
 } 
  else {
      $(this).parent().parent().remove(); 
   }
});

function numOrdDesc(a, b) {
return (b - a);
}

Upvotes: 1

Views: 2361

Answers (4)

low_rents
low_rents

Reputation: 4481

add this at the end of your click-event-function:

var new_number = 1;
$('ul.p-wrap li span').each(function() {
     $(this).text(new_number)
     new_number++;
});

http://jsfiddle.net/northkildonan/jkcLe6xp/5/

Upvotes: 4

DevlshOne
DevlshOne

Reputation: 8457

In your else:

} else {
    $(this).parent().parent().remove();
    $('ul.p-wrap li').each(function(i,e) {
        $(this).attr('id', 'p_cont_' + ( i+1 ));
        $(this).find('.num-cont').attr('id', 'para_cont_' + ( i+1 ));
        $(this).find('.num-cont').text(( i+1 ));
    });
}

JSFiddle

This also renumbers all of your IDs and CLASSes

Upvotes: 0

HLP
HLP

Reputation: 2212

In your else, you could add:

     var i = 1;
     $('li>span').each(function() {
         $(this).html(i);
         i++;
     });

Upvotes: 1

imjared
imjared

Reputation: 20554

Could you use CSS? List items would do this automatically:

// css
li {
    list-style: decimal;
}

// html
<a href="#" class="create">Create a paragraph</a>
<ul class="p-wrap"></ul>

//javascript
$('.create').on('click', function() {
    $('ul').append('<li> item <a href="#" class="removeMe">delete item</a></li>');
    $('.removeMe').on('click', function() {
        $(this).parent().remove();
    });
});

http://jsfiddle.net/z00efajm/

Upvotes: 2

Related Questions