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

Question

我正在使用Gridster我有一个带有图像的小部件。有一个 JSON 提供有关每个网格上应该有什么图像的数据(我从 JSON 获取文本，然后从数据库获取相应的图像)。我想要每个网格上都有一个按钮image 将从小部件中删除图像，并从 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这就是我想做的事情

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

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

Answer 1

试试这个:

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

在这里测试:JSFiddle