Javascript 在使用jQuery删除不需要的行之后，如何对列表重新编号？

我的代码通过单击+符号创建段落，也可以通过单击X删除。每次添加段落或行时，数字都会上升。当我删除一个段落或行时，这个数字会被删除，这是应该的。但是，我想让它自动重新编号。例如：如果我创建了4个段落，它会列出1，2，3，4并删除2个段落，那么它看起来像1，3，4，我需要它像1，2，3那样执行。 我没能找到解决办法。 有人熟悉这个吗？ 这是在使用jQuery

查看此链接以查看代码：

HTML

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

---

你能用CSS吗？列表项将自动执行此操作：

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

---

你能用CSS吗？列表项将自动执行此操作：

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

在您的else中：

这也会在else中对所有ID和类重新编号：

---

这也会对您的所有ID和类重新编号。

在您的系统中，您可以添加：

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

---

在您的else中，您可以添加：

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

---

在单击事件函数的末尾添加以下内容：

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

---

在单击事件函数的末尾添加以下内容：

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

---

不，因为我不能删除圆点，我使用了一个span作为样式。不，因为我不能删除圆点，我使用了一个span作为样式。