JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<table>
    <thead>
        <tr>
            <td>ToDo List</td>
        </tr>
    </thead>
    <tbody data-bind="foreach: toDoItems">
        <tr>
            <!-- ko if:   $root.desktop -->  
            <td> <label> hola</label></td>
              <!-- /ko -->
            <td><label data-bind="text: toDoItem"></label></td>
            <td><a href="#" data-bind="click: $root.removeToDoItem">Remove</a></td>
        </tr>
    </tbody>
</table>

<input class="txt"/>
<button data-bind="click: addToDoItem">Add Item</button>

JavaScript

function ToDoViewModel() {
    var self = this;


self.ToDo = function(stuff){
debugger;
    return {
    toDoItem :stuff
    }
}

    self.toDoItems = ko.observableArray([ ]);

   self.desktop =  ko.observable(true)
    self.addToDoItem = function() {
      var self = this;
        self.toDoItems.push(new self.ToDo($('.txt').val()));
        $('.txt').val('');
         self.desktop(true);
    };

    self.removeToDoItem = function(item) { 
        //self.toDoItems.remove(item); 
          self.toDoItems([]); 
          self.desktop(false);
    };
    
       self.changeZise = function (vm) {
        var self = vm;
        var width = $(window).width();
        $(window).on('resize', function () {
            if ($(this).width() != width) {
                width = $(this).width();
                console.log(width);
                debugger;
                self.removeToDoItem(width)
            }
        });

    };
    
}
    var vm = new ToDoViewModel();
    ko.applyBindings(vm);
    vm.changeZise(vm);