Удалить изображение, сопоставленное с json, в javascript / jquery

Я использую виджет Гридстер для веб-страницы. У меня есть виджеты, на которых есть изображения. Есть 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>

Скрипка - это то, что я пытаюсь сделать

У скрипки есть кнопка для удаления изображения, но она, похоже, не работает, и после удаления изображения я хочу обновить / очистить соответствующую пару значений ключа, а также объект json, из которого оно сгенерировано

Любая помощь будет очень признательна, потому что это, похоже, тема продвинутого уровня JS / JQuery.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
148
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Попробуй это:

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

Протестировано здесь: JSFiddle

Я хочу удалить изображение, а не внешний виджет

NewBie 23.03.2018 08:26

Он также удаляет элемент li. Я поставил кнопку "x", которую хочу удалить изображение.

NewBie 23.03.2018 08:26

Это удаляет изображение или просто скрывает его?

NewBie 23.03.2018 08:28

заменить hide() на remove()

Joseph D. 23.03.2018 08:28

Спасибо, это решает мою часть вопроса. Но другая часть - я также хочу удалить значение JSON, из которого оно создается. Вот где я вообще не мог думать

NewBie 23.03.2018 08:30

Поэтому, когда я снова сгенерирую json, он не будет иметь значения в поле «html», где изображение удаляется.

NewBie 23.03.2018 08:30
jsfiddle.net/22530po8/1 Это поможет вам понять, как я получаю свой JSON
NewBie 23.03.2018 08:34

Также этот вопрос здесь stackoverflow.com/questions/49220256/…

NewBie 23.03.2018 08:39

Я использую функцию сериализации для генерации JSON, но не думаю, что здесь это сработает. Для этого понадобится новая функция, которая будет генерировать JSON аналогичной формы.

NewBie 23.03.2018 08:42

Позвольте нам продолжить обсуждение в чате.

NewBie 23.03.2018 08:43

Я просто хочу знать, как я могу очистить значение ключа "html" при удалении изображения для определенного виджета. Это то, чего я не понимал.

NewBie 23.03.2018 08:51
delete window.json[index], предполагая, что json - глобальная переменная
Joseph D. 23.03.2018 08:58

Я имею в виду, что в функции, которая находится в ответе выше, я хочу также получить виджет, из которого вызывается функция. Чтобы я мог удалить "html" этого виджета. Я не могу понять, как передать какие виджеты вызывают эту функцию

NewBie 23.03.2018 09:06

Другие вопросы по теме