基于Gridster组件：删除图片时动态更新Textarea内容

要实现删除图片时动态清空对应textarea内容，核心是找到删除按钮所在小部件（widget）内的目标textarea，同步清空它的值，这样后续调用Serialize就能拿到更新后的JSON数据。我们可以这样修改你的代码：

修改删除图片的JS函数 #

更新删除逻辑，关联对应textarea的清空操作：

//Function for deleting images
$('.removediv').on('click', function () {
    // 定位当前点击按钮所属的图片容器
    const $imageWrap = $(this).closest('div.imagewrap');
    // 找到该图片容器所在widget内的textarea
    const $targetTextarea = $imageWrap.closest('.gridster ul li').find('textarea');
    
    // 先清空对应textarea的内容
    $targetTextarea.val('');
    // 再移除图片容器
    $imageWrap.remove();
});

关键逻辑说明 #

• 利用closest('.gridster ul li')精准定位当前图片所在的小部件，确保找到的textarea是当前图片对应的那一个，不会误操作其他widget的内容。
• 先清空textarea再移除图片容器，保证后续执行serialize_params时，获取到的textarea值已经是更新后的空值，序列化出的JSON自然会同步更新。

验证方式 #

点击删除按钮移除图片后，再点击Serialize按钮，查看#log文本框内的JSON数据，对应widget的images字段会变成空字符串，说明同步操作生效。

内容的提问来源于stack exchange，提问作者Rookie_123