JSFiddle - React, Tailwind, and code Playground

by AlexandrAbakumov

HTML

<div data-bind="foreach: list">
    <span data-bind="text: $data"></span>
    <span data-bind="click: $root.remove" class="remove-handle">x</span>
</div>
<div>
    <input type="text" data-bind="value: currentItem" />
    <input type="button" data-bind="click: add" value="Add" />
</div>

CSS

.remove-handle {
    cursor: pointer;
}

JavaScript

function AppViewModel() {
    var self = this;

    self.list = ko.observableArray();
    self.currentItem = ko.observable();

    // Public methods
    self.add = function () {
        self.list.push(self.currentItem());
        self.currentItem('');
    };

    self.remove = function (item) {
        self.list.remove(item);
    };
};

// Activates knockout.js
ko.applyBindings(new AppViewModel());