Pagination: Удалить элемент с помощью jquery?

Question

У меня есть раздел, где мне нужно разбивать страницы. Теперь вопрос номер будет добавлен, но я хочу, чтобы удалить предыдущая номер

Я в настоящее время иметь что-то, как показано ниже:

Предыдущая 1 2 3 Следующая

Когда я нажимаю на следующий 4 добавляется и становится предыдущая 1 2 3 4 Далее

Когда я нажимаю на следующий раз 5 добавляется и становится предыдущая 1 2 3 4 5 следующая

Что я пытаюсь сделать, и что должно быть с

Предыдущая 1 2 3 Следующая

Когда я нажимаю на следующий 4 будет добавлен, и он должен стать Предыдущая 2 3 4 Следующая

Когда я нажмите на следующий раз 5 добавляется и становится Prev 3 4 5 Следующая

Когда я нажимаю на Предыдущая Теперь она должна быть Предыдущая 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

Вот как я бы это сделать.
Я бы добавил класс к тэгам 3 <li> с номерами внутри для легкого доступа с помощью селектора jQuery. Внутри заявление, если-где проверить погоду следующая кнопка имеет идентификатор next, удалить первый ребенок, как так:

$('.three_links').first().remove(); 

и добавьте следующий номер после последнего ребенка, как так:

$('.three_links').last().after('<li class="three_links"><a class="active" href="#">'+num+'</a></li>'); 

и если идентификатор prev удалить последний ребенок и добавить номер предыдущего до первого ребенка, но только если предыдущее число больше 1:

if(num > 0){ 
    active_elm.removeClass('active'); 
    $('.three_links').last().remove(); 
    $('.three_links').first().before('<li class="three_links"><a class="active" href="#">'+num+'</a></li>'); 
} 

Here is a working jsfiddle.

HTML:

<div class="center"> 
    <ul class="pagination"> 
     <li><a href="#" id="prev">«</a></li> 
     <li class="three_links"><a id="test1" href="#">1</a></li> 
     <li class="three_links"><a id="test2" class="active" href="#">2</a></li> 
     <li class="three_links"><a id="test3" href="#">3</a></li> 
     <li><a href="#" id="next">»</a></li> 
    </ul> 
</div> 

ЯШ:

$('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'); 
      $('.three_links').first().remove(); 
      $('.three_links').last().after('<li class="three_links"><a class="active" href="#">'+num+'</a></li>'); 
      return; 
     } 
     _next.addClass('active'); 
    } 
    else if(this.id == 'prev') { 
     var _prev = active_elm.parent().prev().children('a'); 
     if($(_prev).attr('id') == 'prev'){ 
      var num = parseInt($('a.active').text())-1; 
      if(num > 0){ 
       active_elm.removeClass('active'); 
       $('.three_links').last().remove(); 
       $('.three_links').first().before('<li class="three_links"><a class="active" href="#">'+num+'</a></li>'); 
      } 
      return; 
     } 
     _prev.addClass('active'); 
    } else { 
     $(this).addClass('active'); 
    } 
    active_elm.removeClass('active'); 
}); 

Answer 2

Используйте это после добавления следующего номера

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

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

Answer 3

Использование ниже сценария:

$('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()); 
     var hidenum = parseInt($('a.active').text())-2; 
     if(hidenum > 0){ 
      $('#next').parent().prev().prev().prev().prev().hide(); 
     } 
     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'); 

});