Hide a particular component in preview

I Used toHTML() function. And when I called editor.getHtml() it is returning the html as expected, but when I click preview button the "Banner_Options_Btn" appears.

Here is the code. Please Help me

    domc.addType('banner_gal', {
      model: defaultModel.extend({
        defaults: Object.assign({},
          defaultModel.prototype.defaults, {
            type: 'banner_gal_type',
            tagName: 'div',
            toolbar: [],
            components: [{
                tagName: "div",
                type: "button",

                components: [{
                  classes: ["Banner_Options_Btn"],
                  tagName: "button",
                  type: "button",
                  content: 'Options',
                  styles: 'display:inline-block',
                  toolbar: [],
                }]
              },

            ],
          }),
        toHTML(opts) {
              var retVal = '<div>My Own Content</div>';
              return retVal;
        }
      }, {
        isComponent(el) {
          var result = '';
          if (el.tagName == 'DIV' && el.className == "main_banner_div") {
            result = {
              type: 'banner_gallery_portion'
            };
          }
          return result;
        },

      }, ),

      view: defaultType.view.extend({
        init() {
          this.listenTo(this.model, 'change:src', this.updateSrc);
          //            this.listenTo(this.model, 'click active', this.updateSrc);
        },

        events: {
          //                'click .BannerTopLevel':'handleClick',
          'click .simple_banner': 'ShowSimpleBanner',

        },
      })
    });