在 javascript/jquery 中删除映射到 json 的图像

Question

我正在为网页使用Gridster 小部件。我有带有图像的小部件。有一个 JSON 提供有关每个网格上应该有什么图像的数据（我从 JSON 获取文本，然后从数据库）。我想要每个图像上的按钮，它将从小部件中删除图像并从 JSON 中删除相应的值。

生成小部件的我的 JS 循环：

for(var index=0;index<json.length;index++) {
            {% load static %}
       gridster.add_widget('<li class="new" ><button class="delete-widget-button" style="float: right;">-</button><img src="{% get_static_prefix %}images/'+json[index].html+'"></li>',json[index].size_x,json[index].size_y,json[index].col,json[index].row);
    };

我的 JSON

  var json = [{
            "html": 'abc.png',
            "col": 1,
            "row": 1,
            "size_y": 2,
            "size_x": 2
        }, {
            "html": "xyz.png", 
            "col": 4,
            "row": 1,
            "size_y": 2,
            "size_x": 2
        },

        {
            "html": "def.png",
            "col": 6,
            "row": 1,
            "size_y": 2,
            "size_x": 2
        },


        {
            "html": "abc.png",
            "col": 1,
            "row": 3,
            "size_y": 1,
            "size_x": 1
        }, {
            "html": "def.png",
            "col": 4,
            "row": 3,
            "size_y": 1,
            "size_x": 1
        },

        {
            "html": "abc.png    ",
            "col": 6,
            "row": 3,
            "size_y": 1,
            "size_x": 1
        }

        ];

我的 HTML：

<div class="gridster">
    <ul>

    </ul>

</div>

Fiddle 是我想要做的事情

小提琴有一个删除图像的按钮，但它似乎不起作用，删除图像后我想更新/清除相应的键值对以及生成它的 json 对象

任何帮助将不胜感激，因为这似乎是 JS/Jquery 的高级主题

Answer 1

试试这个：

$('.removediv').on('click', function () {
  $(this).closest('div.imagewrap').remove();
});

在这里测试：JSFiddle