title: Gridster.js removing a widget
body: <p>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 <code>gridster.remove_widget()</code>  that i found in the documentation in the web site of the plugin here <a href="http://gridster.net/" rel="nofollow">http://gridster.net/</a> to remove my widget but it didnt work here is my HTML :</p>
  
  <pre><code>        &lt;div class="gridster"&gt;
            &lt;ul style="height: 480px; position: relative; "&gt;
              &lt;li data-id="1" data-row="1" data-col="1" data-sizex="2" data-sizey="1" class="gs_w"&gt;
                  &lt;img src="img/icon.png"/&gt;
                  &lt;img src="img/mod.png" class="mod 1"/&gt;
                  &lt;img src="img/close.png" data-close="1" class="close"/&gt;
              &lt;/li&gt;
              &lt;li data-id="2" data-row="3" data-col="1" data-sizex="1" data-sizey="1" class="gs_w"&gt;
                  &lt;img src="img/icon.jpg"/&gt;
                  &lt;img src="img/mod.png" class="mod 2"/&gt;
                  &lt;img src="img/close.png" data-close="2" class="close"/&gt;
              &lt;/li&gt;
  
              &lt;li data-id="3" data-row="3" data-col="2" data-sizex="2" data-sizey="1" class="gs_w"&gt;
                  &lt;img src="img/icon3.jpg"/&gt;
                  &lt;img src="img/mod.png" class="mod 3"/&gt;
                  &lt;img src="img/close.png" data-close="3" class="close"/&gt;
              &lt;/li&gt;
              &lt;li data-id="4" data-row="1" data-col="3" data-sizex="2" data-sizey="2" class="gs_w"&gt;&lt;img src="img/icon5.jpg"/&gt;
                  &lt;img src="img/mod.png" class="mod 4"/&gt;
                  &lt;img src="img/close.png" data-close="4" class="close"/&gt;
              &lt;/li&gt;
  
              &lt;li data-id="5" data-row="1" data-col="5" data-sizex="1" data-sizey="1" class="gs_w"&gt;
                  &lt;img src="img/icon2.jpg"/&gt;
                  &lt;img src="img/mod.png" class="mod 5"/&gt;
                  &lt;img src="img/close.png" data-close="5" class="close"/&gt;
              &lt;/li&gt;
  
            &lt;/ul&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>here is my JS file : </p>
  
  <pre><code>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 + "']"));
      });
  });
  </code></pre>
  
  <p>Sorry for my rusty english...</p>