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();
    }
  })

`this` within the `close` handler function will not refer to the parent object of `_createMain`, so that's one issue. Secondly the `add()` jQuery method is used tom combine existing jQuery objects. Given the context you seem to want `remove()` instead. Lastly, you can combine the `appendTo()` on a single line to reduce the code, eg: `this.wrapper = $('
').appendTo(this.element);` — Rory McCrossan, Mar 04 '20 at 15:51

Add close button into a viewer created with jquery?

0 Answers0