gridstack.js issue base

Use this as a base for examples for gridstack.js issues.

HTML

<script src="https://cdn.jsdelivr.net/npm/gridstack@7.0.0/dist/gridstack-all.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@7.0.0/dist/gridstack.min.css">
<h1>gridstack.js base demo for issues</h1>
<p>Fork and modify me to demonstrate your issue when creating an issue for gridstack.js</p>
<div><a class="btn btn-default" onClick="addNewWidget()" href="#">Add Widget</a></div>
<br />

<div class="grid-stack"></div>

CSS

.grid-stack {
  background: lightgoldenrodyellow;
}

.grid-stack-item-content {
  color: #2c3e50;
  text-align: center;
  background-color: #18bc9c;
}

JavaScript

var options = { // put in gridstack options here
  disableOneColumnMode: true, // for jfiddle small window size
  float: false
};
var grid = GridStack.init(options);

var count = 0;
var items = [
  {x: 0, y: 0, w: 2, h: 2},
  {x: 2, y: 0, w: 2},
  {x: 3, y: 1, h: 2},
  {x: 0, y: 2, w: 2},
];

var widgets = {};

addNewWidget = function () {
  var node = items[count] || {
    x: Math.round(12 * Math.random()),
    y: Math.round(5 * Math.random()),
    w: Math.round(1 + 3 * Math.random()),
    h: Math.round(1 + 3 * Math.random())
  };
  node.content = `<button id="${count}" onClick="removeWidget(${count})">Remove me</button>`;
  widgets[count] = grid.addWidget(node);
  count++;
  return false;
};

removeWidget = function(index) {
  let el = document.getElementById(index);
  // grid.removeWidget(widgets[index], false); // This works fine
  // btn.gridElement.gridContainer.remove(btn.gridElement)
  el.parentElement.parentElement.remove(el.parentElement);
  grid.removeWidget(widgets[index], false); // This doesn't work
}

addNewWidget();
addNewWidget();