Q:

Access element that has KO click binding to remove parent element from DOM

I have created some code that when a user clicks an element creates a small popover window. Several of these elements exist and each creates their own window when clicked.
This is the HTML that is being created:
<div class="window">
  <header>
    <h2 class="title" data-bind="text: title">window title</h2>
    <i data-bind="click: destroyWindow(this)">close</i>
  </header>
  <main>
    <div class="content">content area</div>
  </main>
</div>

When I click on that "close" element, I want to remove the whole window from the DOM entirely. 
My idea was to go like this in the corresponding viewmodel:
self.destroyWindow = function(elem) {
    $(elem).closest('.window').remove();
};

but it seems I cannot pass the element that was clicked on as a parameter that easily. console.log(elem) revealed that this pointed to the global object window.
This is the complete viewmodel ../component/draggable.window.js:
var WindowViewModel = function (params) {
    var self = this;
    /* BEGIN Properties */
    self.title = ko.observable("Window title");
    self.destroyWindow = function(elem) {
        $(elem).closest('.window').remove();
    };
    /* END Properties */
};

This is the call that adds these windows to the DOM:
var dragWin = require('../component/draggable.window.html'); // the above html
var vm = require('../component/draggable.window');
$(dragWin)
    .appendTo($("body"))
    .applyBindings(new vm())
;

I have also written a very small jQuery plugin that applies the bindings to a dynamically generated DOM element:
(function($) {
    $.fn.applyBindings = function(vm) {
        return this.each(function() {
            ko.applyBindings(vm ? vm : null, this);
        });
    };
}(jquery));

Question: What would be the correct way to remove that window from the DOM when someone clicks "close"?
P.S.: I know I could write an inline onclick handler such as 
<i onclick="$(this).closest('.window').remove()">close</i>

but this is a) not KO way and b) very unelegant.

A:

You can do it in a simpler way in pure knockout.

Have an observable array which holds element of your windows.
Have a window View Model and create a new instance for every new window and push it to the array (no need to have a dynamic binding). 
Remove a corresponding window by passing it to the parent model.
You can also have a variable for css binding inside your WindowVM to give a different style to each window. 

Example : https://jsfiddle.net/kyr6w2x3/150/
JS:
var MainViewModel = function(){
  var self = this;
  self.windowList = ko.observableArray([]);
  self.destroyWindow = function(item){
    ko.utils.arrayForEach(self.windowList(), function (element) {
      if(element && element == item)self.windowList.remove(element);
    });
   }
  var i = 0;
  self.createWindow = function(){
    i++;
    self.windowList.push(new WindowViewModel ({title: "Window " + i , content : " content area " + i }));
  }
}        

var WindowViewModel = function(data){
  var self = this;
  self.title = ko.observable(data.title || '');
  self.content = ko.observable(data.content || '');
}

var viewModel = new MainViewModel();
ko.applyBindings(viewModel);

View:
<!-- ko foreach: windowList -->
<div  class="modal">
  <div class="window">
    <h2 class="title" data-bind="text: title">window title</h2>
   <button class="close" data-bind="click: $parent.destroyWindow">X </button>
   <p class="content" data-bind="text: content"></p>
  </div>
</div>
<!-- /ko -->

