javascript - 分页 : Remove element using jquery?

Question

我有一个部分，我必须在其中对记录进行分页。现在的问题是添加了号码，但我想删除上一个号码

我目前有如下内容:

上一页 1 2 3 下一页

当我点击下一个 4 被添加时，它变成上一页 1 2 3 4 下一页

当我再次点击下一步时，添加了 5，它变成了上一页 1 2 3 4 5 下一页

我想做什么，应该做什么

上一页 1 2 3 下一页

当我点击下一个 4 被添加时，它应该变成上一页 2 3 4 下一页

当我再次点击下一步时，添加了 5，它变成了上一页 3 4 5 下一页

当我点击 Previous 现在应该是上一页 2 3 4 下一页

请在下面找到我的可运行代码:

$('ul.pagination').on('click', 'a', function() { // listen for click on pagination link
    if($(this).hasClass('active')) return false;
  
    var active_elm = $('ul.pagination a.active');
  
    if(this.id == 'next'){
      var _next = active_elm.parent().next().children('a');
      if($(_next).attr('id') == 'next') {
        
        // appending next button if reach end
        var num = parseInt($('a.active').text())+1;
        active_elm.removeClass('active');
        $('<li><a class="active" href="#">'+num+'</a></li>').insertBefore($('#next').parent());
        return; 
      }
      _next.addClass('active');   
      
      
      
      
    }
    else if(this.id == 'prev') {
      var _prev = active_elm.parent().prev().children('a');
      if($(_prev).attr('id') == 'prev') return false;
      _prev.addClass('active');   
    } else {
      $(this).addClass('active');
    }
    active_elm.removeClass('active');
    
});

ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
}

ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}

div.center {text-align: center;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center">
  <ul class="pagination">
    <li><a id="prev">«</a></li>
    <li><a id="test1" href="#">1</a></li>
    <li><a id="test2" class="active" href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#" id="next">»</a></li>
  </ul>
</div>

Answer 1

在添加下一个数字后使用它

$('#prev').parent().next().remove();

Codepen http://codepen.io/mastersmind/pen/ZBJZjo