JSFiddle - React, Tailwind, and code Playground

by gene

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<button data-bind="click: removeFirst">Remove first</button>

<!-- ko with: topN -->
<h1>Top <span data-bind='text: count'></span></h1>
<ul data-bind='foreach: rows, beforeRemove: $parent.onRemove'>
    <li data-bind="text: name"></li>
</ul>
<!-- /ko -->
<h1>All items</h1>
<ul data-bind='foreach: items, beforeRemove: onRemove'>
    <li data-bind="text: name"></li>
</ul>

CSS

body {
    font-family: sans-serif;
}

.transition-out {
    background-color: pink;
}

h1 {
    font-size: 14pt;
    margin-top: 10px;
}

JavaScript

function Item(i) {
    var self = this;
    this.name = ko.observable("Item " + i);
    
    this.toString = function() { return self.name(); }
}

var items = [];
for(var i=1; i<=15; i++)
    items.push(new Item(i));


function TopN(items, size) {
    var self = this;
    
    this.list = items;
    this.count = ko.observable(size || 10);   
    this.rows = ko.observableArray([]);
    ko.computed(function() {
        this.rows( this.list.slice(0, this.count()) );
    }, this);
            

}

function viewModel(list) {
    var self = this;
    
    this.items = ko.observableArray(list);
    this.topN = ko.observable(new TopN(this.items, 5));
    
    this.removeFirst = function() {
        self.items.remove(self.items()[0]);
    };
    
    this.onRemove = function(elements) {
        console.log("Updating");
        $(elements).addClass('transition-out').fadeOut(600).remove();
    };
}

ko.applyBindings(new viewModel(items));