Gridster.js removing a widget

Question

i'm using the Gridster.js in a web page and i'm trying to remove a widget with a button that appears on hover of the image.To do i use the function gridster.remove_widget() that i found in the documentation in the web site of the plugin here http://gridster.net/ to remove my widget but it didnt work here is my HTML :

        <div class="gridster">
          <ul style="height: 480px; position: relative; ">
            <li data-id="1" data-row="1" data-col="1" data-sizex="2" data-sizey="1" class="gs_w">
                <img src="img/icon.png"/>
                <img src="img/mod.png" class="mod 1"/>
                <img src="img/close.png" data-close="1" class="close"/>
            </li>
            <li data-id="2" data-row="3" data-col="1" data-sizex="1" data-sizey="1" class="gs_w">
                <img src="img/icon.jpg"/>
                <img src="img/mod.png" class="mod 2"/>
                <img src="img/close.png" data-close="2" class="close"/>
            </li>

            <li data-id="3" data-row="3" data-col="2" data-sizex="2" data-sizey="1" class="gs_w">
                <img src="img/icon3.jpg"/>
                <img src="img/mod.png" class="mod 3"/>
                <img src="img/close.png" data-close="3" class="close"/>
            </li>
            <li data-id="4" data-row="1" data-col="3" data-sizex="2" data-sizey="2" class="gs_w"><img src="img/icon5.jpg"/>
                <img src="img/mod.png" class="mod 4"/>
                <img src="img/close.png" data-close="4" class="close"/>
            </li>

            <li data-id="5" data-row="1" data-col="5" data-sizex="1" data-sizey="1" class="gs_w">
                <img src="img/icon2.jpg"/>
                <img src="img/mod.png" class="mod 5"/>
                <img src="img/close.png" data-close="5" class="close"/>
            </li>

          </ul>
        </div>

So i've set 2 little icons on my photos one to modifie, and the other to delete the widget / image but the delete button doesn't work.

here is my JS file :

var gridster = "";
$(document).ready(function () {
    $(".gridster ul").gridster({
        widget_margins: [1, 1],
        widget_base_dimensions: [140, 140],
        shift_larger_widgets_down: false
    });

    $(".gs_w").hover(function (){
        var id = $(this).attr("data-id");
        //show close button on hover
        $("ul").find("[data-close='" + id + "']").show();
        //show modifie button on hover
        $("."+id).show();
    });
    $(".gs_w").mouseleave(function (){
        var id = $(this).attr("data-id");
        //hide close button on hover
        $("ul").find("[data-close='" + id + "']").hide();
        //hide close button on hover
        $("."+id).hide();
    });
    $(".close").click(function(){
        var id=$(this).attr("data-close");
        console.log(id);
        //$("ul").find("[data-id='" + id + "']").remove();
        gridster.remove_widget($("ul").find("[data-id='" + id + "']"));
    });
});

Sorry for my rusty english...

Answer 1

When you declare your gridster you need at the end of it to add data('gridster') and attach it to a variable, for example gridster. Then you will can use the gridster api. Here is the working example:

var gridster = "";
$(document).ready(function () {
    gridster = $(".gridster ul").gridster({
        widget_margins: [1, 1],
        widget_base_dimensions: [140, 140],
        shift_larger_widgets_down: false
    }).data('gridster');

    $(".gs_w").hover(function (){
        var id = $(this).attr("data-id");
        //show close button on hover
        $("ul").find("[data-close='" + id + "']").show();
        //show modifie button on hover
        $("."+id).show();
    });
    $(".gs_w").mouseleave(function (){
        var id = $(this).attr("data-id");
        //hide close button on hover
        $("ul").find("[data-close='" + id + "']").hide();
        //hide close button on hover
        $("."+id).hide();
    });
    $(".close").click(function(){
        var id=$(this).attr("data-close");
        console.log(id);
        //$("ul").find("[data-id='" + id + "']").remove();
        gridster.remove_widget($("ul").find("[data-id='" + id + "']"));
    });
});