1

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

4 Answers 4

4

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/

2

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/

1
  • No, because I wouldn't be able to remove the dot, and i'm using a span for style purposes.
    – jQueryster
    Sep 7, 2014 at 2:27
1

In your else, you could add:

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.