jqueryで新しいアイテムを追加するときに最後の子を削除する方法

Question

jqueryでdinamic liを追加したいのですが、私は最後の位置liが3に達したらそれを取り除き、新しい値を入力するときに追加しておきたい。しかし、私は最後の位置を削除することに問題があります。

は常に、検索テキストを付加し、条件が達成された場合は削除し、あなたがそこにある新しいアイテムに 感謝

$(document).ready(function() { 
 
    $('.search').on('click', function() { 
 
    var text = $('#person').val(); 
 
    var li_count = $('ul.history li').length; 
 
    $('#person').val(''); 
 
    if (li_count < 3) { 
 
     $('ul.history').prepend('<li><a href="' + text + '">' + text + '</a></li>'); 
 
    } else { 
 
     $('ul.history li:last-child').remove(); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="person" type="text"> 
 
<button class="search">search</button> 
 
<ul class="history"> 
 
</ul>

Answer 1

を追加するとき、最後の位置を削除する方法任意の提案があります。

$('ul.history').prepend('<li><a href="' + text + '">' + text + '</a></li>'); 
if (li_count >= 3){ 
    $('ul.history li:last-child').remove(); 
} 

$(document).ready(function() { 
 
    $('.search').on('click', function() { 
 
    var text = $('#person').val();  
 
    $('#person').val('');  
 
    $('ul.history').prepend('<li><a href="' + text + '">' + text + '</a></li>'); 
 
    
 
    //Take latest length 
 
    var li_count = $('ul.history li').length; 
 
    if (li_count > 3){ 
 
     $('ul.history li:last-child').remove(); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="person" type="text"> 
 
<button class="search">search</button> 
 
<ul class="history"> 
 
</ul>