jQuery在一定数量的子元素之后删除子元素

Question

我有一个<span id="chat_hist">，其子元素为<pre class="chatHist"></pre>。一旦有超过100个<pre>

，我想先删除最早的<pre></pre>

<span id="chat_hist">
   <pre class="chatHist"></pre> // <- start deleting from here once more than 100 <pre
   <pre class="chatHist"></pre> // <- second one to delete once it hits 100 <pre again
   <pre class="chatHist"></pre>
   ...
   <pre class="chatHist"></pre>
</span>

Answer 1

您需要的是first()和remove()函数。

然后，您可以在主函数中简单地执行此操作（例如，用于添加<pre>元素的函数）

if($('.chatHist','#chat_hist').length > 99) {
 $('.chatHist','#chat_hist').first().remove();
}

Answer 2

根据您在如下所示的循环内的要求使用first-child或last-child伪。

function deleteLog() {
  setTimeout(function() {
    $('#chat_hist').find('.chatHist:first-child').remove();
    if ($('.chatHist').length > 0) { //Check condition 0 or 100
      deleteLog();
    }
  }, 1000)
}
deleteLog();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="chat_hist">
   <pre class="chatHist">1</pre> //  start deleting from here once more than 100 <pre
   <pre class="chatHist">2</pre> //  second one to delete once it hits 100 <pre again
   <pre class="chatHist">3</pre>

   <pre class="chatHist">4</pre>
</span>

Answer 3

if($('#chat_hist .chatHist').size() > 99){
   $('#chat_hist .chatHist').first().remove();
}