Collectives™ on Stack Overflow
Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
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.
$(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($('<div><div class="grid-stack-item-content" /><div/>'),
node.x, node.y, node.width, node.height);
}, this);
}.bind(this);
this.save_grid = function () {
this.serialized_data = _.map($('.grid-stack > .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($('<div><div class="grid-stack-item-content" /><i class=" fa fa-remove"></><div/>'), 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();
Assuming you dynamically add items;
Also assuming you have a triggering element with a class 'remove';
$('body').on('click', '.remove', function (e) {
e.preventDefault();
var grid = $('.grid-stack').data('gridstack'),
el = $(this).closest('.grid-stack-item')
grid.remove_widget(el);
note: narrow down your context to the actual container and reference it instead of $('body')
Function remove_widget
is deprecated as of v0.2.5 and has been
replaced with removeWidget
. It will be completely removed in
v1.0.
I know this is an old question, but I thought I'd share my approach, which may might help someone.
var $eGridstack = $(".grid-stack");
$(".btn-delete").click(function ()
let $widget = $(this).closest(".grid-stack-item");
if (confirm("Are you sure you wish to delete this widget?") == true)
$eGridstack.data('gridstack').removeWidget($widget);
Note remove_widget
has been deprecated.
Function remove_widget
is deprecated as of v0.2.5 and has been replaced with removeWidget
. It will be completely removed in v1.0.
Removing widget after click checkbox
$("#mycheckbox").click(function () {if (document.getElementById('mycheckbox').checked == false)
$("#myblockContent").insertAfter("#spantrash");
var grid = $('.grid-stack').data('gridstack');
el=$('#divGridstackContent').closest('.grid-stack-item');
grid.removeWidget(el);
else{
var grid = $('.grid-stack').data('gridstack');
grid.addWidget($('<div><div class="grid-stack-item-content divscroll" id="divGridstackContent" ><span id="spanContent"></span></div></div>'), {id: "Content", x: "0", y: "6", width: "6", height: "6"});
$( "#blockContent" ).insertAfter( "#spanContent" );
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.