Gridster remove_widget throwing error and remove() does not remove widget space from grid

Question

I have a gridster page I am working on and I have images inside of the

element that are clickable buttons that I want to be able to use to control widgets. However, the first one I am working on (remove) is throwing an error:

"TypeError: this.data is undefined" pointing at jquery.gridster.min.js

My HTML & js is (both are embedded in a php file as this is part of a wordpress plugin):

<li id ="fieldId\' + fieldId + \'" class="layout_block">
<img src="'.site_url().'/wp-content/plugins/fresh-forms/img/remove.png" 
  class="removeWidget" width="16" style="padding: 4px; float: right;" 
  onclick="gridsterRemoveField(this)"/>
<div class="info" style="color: #666666;">
<span class="block_name">New Field : Edit to see preview</span>
</div></li>



function gridsterRemoveField(widget){
        fieldId = $(widget).parent().attr("id");
        console.log(fieldId); //returns <li> ID
        fieldIndex = $("li").index($("#" + fieldId));
        console.log(fieldIndex); //returns <li> index
        var rem = gridster.remove_widget($(".layout_block").eq(fieldIndex));
    }

I am more than happy to use the gridster api or jquery's remove() or any other option. I just need the element to be removed from the grid and the page.

Answer 1

var rem = gridster.remove_widget($(".layout_block").eq(fieldIndex), true);

Add true in there as a parameter. It stops the widgets from moving up, which will cause the error.

There is also a remove_all_widgets function that was built in order to get around this bug I believe, but it did not work the way I wanted. Though I did not spend much time trying to get it to work.