如何通過動態創建的ID從gridster.js中刪除單個小部件

Question

我需要知道如何通過他的動態創建的id與gridster.add_widget來移除單個gridster.js小部件。每個新創建的小部件都有一個自己的按鈕來移除該單個小部件，但我無法使其工作。

這裏是我的代碼

$(document).ready(function(){ 

var count = 0; 
var newid = count + 1; 

    $(document).on("click", "#newGrid", function() { 
     var gridster = $(".gridster ul").gridster().data('gridster'); 
     gridster.add_widget('<li id="block"'+newid'>Hello, now delete me <span id="remove"'+newid'>x</span></li>',2 ,1); 
    }); 

    $(document).on('click', '#remove'+newid, function() { 
    var gridster = $(".gridster ul").gridster().data('gridster'); 
     gridster.remove_widget('#block'+newid); 
    }); 

}); 

爲了增加它工作正常，窗口小部件，但我不能刪除部件。

Answer 1

其實你不需要ID去除小部件。請檢查我的腳本。

var gridster = $('.gridster ul').gridster().data('gridster'); 
    $(document).on("click", ".gridster ul li", function() { 
     $(this).addClass("activ"); 
     gridster.remove_widget($('.activ')); 
    }); 

Answer 2

其實，你只需要在一個jQuery元素來包裝你'#block'+newid，在函數評論說：

gridster.remove_widget($('#block'+newid)); 

---

功能評論（在jquery.gridster.js）：

/** 
* Remove a widget from the grid. 
* 
* @method remove_widget 

* @參數{} HTML元素EL jQuery的HTML元素包裹要重新移動。

* @param {Boolean|Function} silent If true, widgets below the removed one 
* will not move up. If a Function is passed it will be used as callback. 
* @param {Function} callback Function executed when the widget is removed. 
* @return {Class} Returns the instance of the Gridster Class. 
*/ 
fn.remove_widget = function(el, silent, callback) {...} 

Answer 3

• NEWID VAR應該增加後點擊添加
• L1標籤沒有ID正確

請檢查下面的代碼，應與您一起

$(document).ready(function(){ 

var count = 0; 
var newid = count + 1; 

$(document).on("click", "#newGrid", function() { 
    var gridster = $(".gridster ul").gridster().data('gridster'); 
    gridster.add_widget('<li id="block'+newid+'">Hello, now delete me <span class="remove">x</span></li>',2 ,1); 
    newid++; 
}); 

    $(document).on('click', '.remove', function() { 
     var gridster = $(".gridster ul").gridster().data('gridster'); 
     gridster.remove_widget($(this).parent()); 
    }); 
}); 

Answer 4

由於它適用於jQuery對象，您不需要添加任何類或標識符來標識您的項目nt刪除。只需創建一個點擊事件並引用$（this）即可。

$('body').on("click", ".gridster ul > li", function() { 
    gridster.remove_widget($(this)); 
}); 

或者更有用的東西，在這裏你有一個「刪除按鈕」李裏：

$('body').on("click", ".gridster ul > li .remove", function() { 
    gridster.remove_widget($(this).closest('li')); 
}); 

Answer 5

這個工作對我來說，我使用的唯一一個時間戳ID

添加項目：

$("#addMod").click(function(e) { 
    gridster1.add_widget(
     '<li class="crItem" id="' + $.now() + '">DESCRIPTION 
     <i class="fi-wrench"></i> 
     <i class="fi-x" id="delItem"></i></li>', 1, 1 
    ); 
}); 

刪除項目：

$('#cashRegisterScreen').on('click', '#delItem', function() {   
    var id=$(this).parent().attr("id");    
    gridster.remove_widget($(".gridster ul").find("[id='" + id + "']")); 

});