jqueryで新着情報を別ページから読み込みたい

前提・実現したいこと

http://www.weblab.co.jp/staff/html/4649.html

上記リンクがまさにやりたい事なのですが、読み込みはするものの、リストの上位5件の抜き出しができません。

発生している問題・エラーメッセージ

$('ul li:gt(2)').remove(); //6件目以降の li を削除

この部分を入れると、何も読み込まず、削除すると、別ページの全ULが表示されます。

該当のソースコード

news.html(呼び出す側)

div id="newsBlock">
<ul>
  <li><p class="time">2017.00.00</p>
  <p class="infoTxt">情報テキストが入ります。情報テキストが入ります。</p></li>
  <li><p class="time">2017.00.00</p>
  <p class="infoTxt">情報テキストが入ります。情報テキストが入ります。情報テキストが入ります。情報テキストが入ります。情報テキストが入ります。情報テキストが入ります。</p></li>
  <li><p class="time">2017.00.00</p>
  <p class="infoTxt">情報テキストが入ります。情報テキストが入ります。</p></li>
  <li><p class="time">2017.00.00</p>
  <p class="infoTxt">情報テキストが入ります。情報テキストが入ります。</p></li>
  <li><p class="time">2017.00.00</p>
  <p class="infoTxt">情報テキストが入ります。情報テキストが入ります。</p></li>
  <li><p class="time">2017.00.00</p>
  <p class="infoTxt">情報テキストが入ります。情報テキストが入ります。</p></li>
  <li><p class="time">2017.00.00</p>
  <p class="infoTxt">情報テキストが入ります。情報テキストが入ります。</p></li>
  <li><p class="time">2017.00.00</p>
  <p class="infoTxt">情報テキストが入ります。情報テキストが入ります。</p></li>
  <li><p class="time">2017.00.00</p>
  <p class="infoTxt">情報テキストが入ります。情報テキストが入ります。</p></li>
  <li><p class="time">2017.00.00</p>
  <p class="infoTxt">情報テキストが入ります。情報テキストが入ります。</p></li>
</ul>
</div>

index.html(読み込む側)

<div id="yomikomi">
<!-- ここに読み込んだHTMLを表示 -->
</div>
<script type="text/javascript" src="assets/lib/jquery-1.12.4.min.js"></script>
<script>
$(function() {
  $.ajax({
    url: 'news.html', 
    cache: false, 
    success: function(html){
      $(html).find('#newsBlock').each(function(){ 
        $('#yomikomi').html($(this).html()); 
        return false;
      });
      $('ul li:gt(4)').remove(); 
    }
  });
});
</script>

試したこと

$('ul li:gt(2)').remove(); 

この部分を削除すると、表示はされましたが、リストの新着部分（上部５件）を表示したいのです。。