JSFiddle - React, Tailwind, and code Playground

HTML

<div data-bind="foreach: staffList" style="border:1px solid black;">
    <div style="border: 1px solid red;">
    <span data-bind="text: Name"> </span>
    <button data-bind="click: $root.deleteClickHandler">Delete</button>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>

JavaScript

function ctor(){
  var self=this;
  self.staffList = ko.observableArray([{Name:'one'},{Name:'two'},{Name:'three'},{Name:'four'}]);
  //ko.track(self.staffList, { deep: true });
  self.deleteClickHandler = function (obj) {
    //TODO show confirm dialog first
    var index = self.staffList.indexOf(obj);
    if (index >= 0) {
      self.staffList.splice(index, 1);
    }
  };
}
ko.applyBindings(new ctor());