Question

Markup:

<div id="status">
    <div style="display: block;">Status OK - 16:57:09.</div>
    <div style="display: block;">Status OK - 16:57:09.</div>
    <div style="display: block;">Status OK - 16:57:05.</div>
    <div style="display: block;">Status OK - 16:57:05.</div>
    <div style="display: block;">Status OK - 16:57:03.</div>
    <div>No status yet.</div>
</div>

Using AJAX, I’m adding a new Div to the status div. I only want five divs to be inside at all time. Meaning after the sixth ajax class, the last div should be removed.

Here is my jQuery code:

<script type="text/javascript">
    function Update() {
        PurgeOldStatuses();
        $("#status").children().first().hide().fadeIn();
    }

    function PurgeOldStatuses() {
        // From the status div, find all divs with index after 5, and remove them.
        $("#status").$("div:gt(5)").remove();
    }
</script>

I wrote in a comment to illustrate what I think is going on, perhaps I’m wrong.

Currently not elements are removed. Any suggestions why?

Answer 1

In order to get better performance, avoid proprietary selectors like :gt(), and only use valid CSS selectors.

This should be very quick:

$("#status").find("div").slice(5).remove();

or this:

$("#status div").slice(5).remove();

---

From the docs for the gt-selector^[docs]:

Because :gt() is a jQuery extension and not part of the CSS specification, queries using :gt() cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. For better performance in modern browsers, use $("your-pure-css-selector").slice(index) instead.

Note that the docs recommend using the slice()^[docs] method, which grabs all elements in the set starting at the zero-based index you provide.