Paginacja: Usunąć element za pomocą jquery?

Question

Mam sekcję, w której muszę paginować rekordy. Teraz kwestia ta liczba zostanie dodana, ale chcę, aby usunąć numer prev

Mam aktualnie posiadające coś jak poniżej:

Poprzedni 1 2 3 Dalej

po kliknięciu na najbliższe 4 zostanie dodany i staje Poprzednia 1 2 3 4 następna

po kliknięciu na następny raz 5 zostanie dodana i staje Poprzednia 1 2 3 4 5 następna

co próbuję zrobić, a co powinno być o

Poprzednia 1 2 3 Dalej

po kliknięciu na najbliższe 4 zostanie dodany i powinien stać Poprzednia 2 3 4 Następna

Kiedy kliknij na następny raz 5 zostanie dodana i staje prev 3 4 5 następna

po kliknięciu na Poprzednie teraz powinno być Poprzednia 2 3 4 Następna

Proszę znaleźć runnable kod poniżej:

$('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

Oto w jaki sposób to zrobić.
Chciałbym dodać klasę do tagów 3 <li> z numerami wewnątrz, aby uzyskać łatwy dostęp za pomocą selektora jQuery. Wewnątrz instrukcji IF-gdzie można sprawdzić pogodę następny przycisk ma identyfikator next, usunąć pierwsze dziecko tak:

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

i dodać kolejny numer po ostatnim dzieckiem tak:

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

i jeśli identyfikator jest prev usunąć ostatnie dziecko i dodać poprzedni numer przed pierwszym dzieckiem, ale tylko wtedy, gdy poprzedni liczba jest większa niż 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> 

JS:

$('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

Użyj tego po dodaniu kolejnego numeru

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

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

Answer 3

skorzystać z poniższego skryptu:

$('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'); 

});