title: Gridstack.js Delete Widget using Jquery
body: <p>Below is the Jquery Function I am using I have no idea how to use remove_widget please help:
  I am not able to find any help on deleting widget whereas the Knockout.js is not of my use as I am not using it.</p>
  
  <pre><code>$(function () {
  var options = {resizable: {
  handles: 'e, se, s, sw, w'
  }
  };
  
  $('.grid-stack').gridstack(options);
  
          new function () {
              this.serialized_data = [
                  {x: 0, y: 0, width: 2, height: 2},
                  {x: 3, y: 1, width: 1, height: 2},
                  {x: 4, y: 1, width: 1, height: 1},
                  {x: 2, y: 3, width: 3, height: 1},
                  {x: 1, y: 4, width: 1, height: 1},
                  {x: 1, y: 3, width: 1, height: 1},
                  {x: 2, y: 4, width: 1, height: 1},
                  {x: 2, y: 5, width: 1, height: 1}
              ];
  
              this.grid = $('.grid-stack').data('gridstack');
  
              this.load_grid = function () {
                  this.grid.remove_all();
                  var items = GridStackUI.Utils.sort(this.serialized_data);
                  _.each(items, function (node) {
                      this.grid.add_widget($('&lt;div&gt;&lt;div class="grid-stack-item-content" /&gt;&lt;div/&gt;'),
                          node.x, node.y, node.width, node.height);
                  }, this);
              }.bind(this);
  
              this.save_grid = function () {
                  this.serialized_data = _.map($('.grid-stack &gt; .grid-stack-item:visible'), function (el) {
                      el = $(el);
                      var node = el.data('_gridstack_node');
                      return {
                          x: node.x,
                          y: node.y,
                          width: node.width,
                          height: node.height
                      };
                  }, this);
                  $('#saved-data').val(JSON.stringify(this.serialized_data, null, '    '));
              }.bind(this);
  
              this.clear_grid = function () {
                  this.grid.remove_all();
              }.bind(this);
              this.add_grid = function(){
                  this.grid.add_widget($('&lt;div&gt;&lt;div class="grid-stack-item-content" /&gt;&lt;i class=" fa fa-remove"&gt;&lt;/&gt;&lt;div/&gt;'), 0, 0, 3, 2, true);
                  $('.fa-remove').click(this.remove_grid);
              }.bind(this);
              this.remove_grid = function(){
                  this.grid.remove_widget("What should I use Here", true);
              }.bind(this);
              $('#save-grid').click(this.save_grid);
              $('#load-grid').click(this.load_grid);
              $('#clear-grid').click(this.clear_grid);
              $('#add-grid').click(this.add_grid);
              $('.fa-remove').click($(this).remove_grid);
              this.load_grid();
          };
      });
  </code></pre>