Проблема с удалением совместного js-узла при нажатии на его пользовательский html-клик

Я использую Joint.js в своем приложении angular.js, у меня есть узел Joint.js, в котором я использую html

<button class="delete">x</button>

(вы можете увидеть это в моем шаблоне представления магистрали) всякий раз, когда пользователь нажимает на эту кнопку, я хочу удалить узел, который работает абсолютно нормально, но я хочу улучшить то, что кнопка должна появляться только тогда, когда пользователь нажимает на свой узел и когда пользователь нажимает на бумаге, кроме узла, эта крестовая кнопка должна исчезнуть так же, как

http://jointjs.com/rappid#a3e927c4-9c6b-4159-b14e-920299be8f87

моя логика, которая, как я думал, состоит в том, чтобы иметь класс в родительском div кнопки

    .html-element button.delete{
        display: none;
    }
    .html-element.showButton button.delete{
       display: block;
    }

который будет добавлен, когда пользователь нажмет на узел, и будет удален, когда пользователь нажмет на бумагу. но когда я делаю эту логику добавления и удаления класса, она работает, но функциональность удаления узла на перекрестной кнопке останавливается.

Целыми днями отлаживая и переделывая код, я пришел к тому, что каким-то образом при вызове этой функции

   f2:function(){
                     var self=this;
                     var elementDiv = $(self.$box).find('button');
                     elementDiv.parent().removeClass("showButton")
              }

удаление ноды по клику крестика останавливается. это означает, что привязка значка к функции удаления модели убрана. это привязка

this.$box.find('.delete').on('click', function()
                    self.model.remove();
                });

Я надеюсь, что это объяснение имеет смысл. Ниже приведен полный код

   var graph = new joint.dia.Graph;
    var element1=false;
    var paper = new joint.dia.Paper({
        el: $('#workFlow'),
        width: '100%',
        height: '98%',
        model: graph,
        gridSize: 1
    });
    paper.on('cell:pointerdown',
        function(cellView, evt, x, y) {
            $scope.cellView=cellView;
            cellView.f1();
        }
    );
    paper.on('blank:pointerdown', function(cell) {
      $scope.cellView.f2();
    });

Backbone View для расширения фигур

 joint.shapes.html = {};
        joint.shapes.html.Element = joint.shapes.basic.Rect.extend({
            defaults: joint.util.deepSupplement({
                type: 'html.Element',
                attrs: {
                    rect: { stroke: 'none', 'fill-opacity': 0,stageType: dataSourceType}
                }
            }, joint.shapes.basic.Rect.prototype.defaults)
        });

// Создайте пользовательское представление для этого элемента, которое отображает HTML-элемент div над ним. // ------------------------------------------------ -------------------------

joint.shapes.html.ElementView = joint.dia.ElementView.extend({

    template: [

            '<span class="glyphicons '+icon+' html-element">',
        '<button class="delete">x</button>',
        '</span>'

    ].join(''),

    initialize: function() {
        var self=this;
        _.bindAll(this, 'updateBox');
        joint.dia.ElementView.prototype.initialize.apply(this, arguments);
        this.$box = $(_.template(this.template)());
        //  this.$box.find('.delete').on('click', _.bind(this.model.remove, this.model));
        this.$box.find('.delete').on('click', function(event){
            self.model.remove();
        });
        // Update the box position whenever the underlying model changes.
        this.model.on('change', this.updateBox, this);
        // Remove the box when the model gets removed from the graph.
        this.model.on('remove', this.removeBox, this);
        this.updateBox();
    }
    ,
    render: function() {
        var self=this;
        joint.dia.ElementView.prototype.render.apply(this, arguments);
        this.paper.$el.prepend(this.$box);
        this.updateBox();
        return this;
    },

    updateBox: function() {
        // Set the position and dimension of the box so that it covers the JointJS element.
        var bbox = this.model.getBBox();
        // Example of updating the HTML with a data stored in the cell model.
        this.$box.css({ width: bbox.width, height: bbox.height, left: bbox.x, top: bbox.y, transform: 'rotate(' + (this.model.get('angle') || 0) + 'deg)' });
    },
    removeBox: function(evt) {
        this.$box.remove();
    },
    f1:function(){
        var self=this;
        var elementDiv = $(self.$box).find('button');
        elementDiv.parent().addClass("showButton");
    },
    f2:function(){
        var self=this;
        var elementDiv = $(self.$box).find('button');
        elementDiv.parent().removeClass("showButton")

    }
});

var el1 = new joint.shapes.html.Element({ position: { x: $scope.shapeX, y: $scope.shapeY }, size: { width: 40, height: 40 }, label: 'I am HTML', select: 'one' });
graph.addCells([el1]);