Question

我正在使用Gridster做一个仪表板。我有下一个代码html：

<div class="gridster">
<ul id="widget_list">
  <li id="widg-1" data-row="1" data-col="1" data-sizex="2" data-sizey="2">1
    <a class='remove' href='#'>&times;</a>
  </li>
  <li id="widg-2" data-row="1" data-col="1" data-sizex="2" data-sizey="2">2
    <a class='remove' href='#'>&times;</a>
  </li>
  <li id="widg-3" data-row="1" data-col="1" data-sizex="2" data-sizey="2">3
    <a class='remove' href='#'>&times;</a>
  </li>
  <li id="widg-4" data-row="1" data-col="1" data-sizex="2" data-sizey="2">4
    <a class='remove' href='#'>&times;</a>
  </li>
</ul>
</div>  
<button id="addWidget" data-role="button">Add widget</button>

在这里，我的代码Javascript：

var gridster;
  $(function(){
    var log = document.getElementById('log');

    gridster = $(".gridster ul").gridster({
      widget_base_dimensions: [100, 55],
      widget_margins: [5, 5],
      autogrow_cols: true,
      resize: {
        enabled: true
      }
    }).data('gridster');

    $(document).on( "click", "#addWidget", function(e) { 
       e.preventDefault(); 
       var li = $('#widget_list li').last();
       var data = li.attr("id");

       var array = data.split('-');
       var id = array[1];
       id++;
       gridster.add_widget.apply(gridster, ['<li id="widg-' + id + '">' + id + '<a class="remove" href="#">&times;</a></li>', 2, 2]);
    });

    $(".remove").click(function(){
        var id=$(this).parent().attr("id");
        alert(id);
        gridster.remove_widget($(".gridster ul").find("[id='" + id + "']"));
    });
  });

问题在于我想要删除之前动态添加的新窗口小部件。当我想删除它已经添加的小部件（四个）时，该功能完美无缺。在另一种情况下，它不起作用。我见过的唯一奇怪的是，程序添加＆＃34; style =＆＃34; display：list-item;＆＃34;作为新创建的小部件中的参数。

任何人都可以帮助我吗？谢谢！

删除之前动态添加的小部件

0 个答案: