Add close button into a viewer created with jquery?

Question

I have created a viewer which I inject into a draggable layer to display in case any of the elements come out of the original container.

The problem comes sometimes when the operators are covered by the viewer, which I have placed at the bottom right of the screen. I want to solve it by putting a button to delete the viewer itself.

Checking the jQuery documentation and old posts I've found something that approaches the solution but I don't think I'm getting it in the right layer. IS there someone who can give me some guidance on what I'm doing wrong? Thanks in advance.

_createMain: function() {
  this.element.empty();
  this.element.addClass('container-main');

  this.wrapper = $('<div class="container-wrapper"></div>');
  this.wrapper.appendTo(this.element);

  this.layers.links = $('<svg class="container-links-layer"></svg>');
  this.layers.links.appendTo(this.wrapper);

  this.layers.operators = $('<div class="container-operators-layer unselectable"></div>');
  this.layers.operators.appendTo(this.wrapper);

  this.layers.temporaryLink = $('<svg class="container-temporary-link-layer"></svg>');
  this.layers.temporaryLink.appendTo(this.wrapper);

  this.viewer = $('<div class="viewer"></div>');
  this.viewer.appendTo(this.element);
  this.viewer = $('.viewer').dialog({
    button: {
      cancel: function() {
        $(this).dialog("close");
      }
    },
    close: function() {
      this.viewer.add();
    }
  })