Javascript 使用JS/Jquery在现有HTML元素中添加图像

在我的网页上有一些小部件。这些小部件中有可以删除的图像。现在我有一个+按钮，当用户单击它时，会打开一个显示图像列表的模式。现在我希望用户选择一个图像单击它，然后按Add Image，然后图像应该添加到指定的小部件中

此外，modal中显示的图像是从服务器检索的，因此我无法手动放置id之类的元素来区分它们。我认为在jquery中这样做将有助于获得单击的特定图像。此外，添加的图像应该具有与现有图像相同的结构

'<div class="imagewrap"><img src= image i click > <input type="button" class="removediv" value="X" /></div></div>';

JS:

有人请帮助我，因为我发现这真的很难得到它

---

“添加图像”部分现在已启动并运行，至少在其原始、修改和添加的代码中是这样：

//EDITS
var parentLI;
$(document).on("click", ".addmorebrands", function() {
    parentLI = $(this).closest('li');
    $('#exampleModalCenter').modal('show');
    $('#exampleModalCenter img').click(function(){
        $(this).addClass('preselect');
        $(this).siblings().removeClass('preselect');
        selectedImageSRC = $(this).attr('src');
    });
});

$('#add-image').click(function(){
    parentLI.append('<div class="imagewrap"><img src="'+selectedImageSRC+'"> 
    <input type="button" class="removediv" value="X" /></div>');
    parentLI.children('textarea')
       .append(', '+selectedImageSRC);
    $('#exampleModalCenter').modal('hide');
});

我将留给您调整每个单元格内图像大小的部分，以及其他所有内容：

更新

此代码仅适用于运行时存在的.removediv：

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

这就是为什么先前存在的图像确实会被删除，但不会被以后添加的图像删除。我不是专家，因此请进行研究以获得更技术性的解释，但基本上：

以下代码的作用几乎相同，只是因为它附加到文档中，但应用到了.removediv，而在运行此代码时它实际上已经存在，所以事件总是会找到它的路径到.removediv

更新小提琴：

---

还记得在删除时更新textarea内容

word of advice，检查您的小提琴：正确设置代码格式并缩进代码，因为现在代码很难理解，可能不鼓励人们帮助您。另外，你的图片彼此重叠是的，很抱歉我写了那个代码，我赶时间，我是JS的新手。为标识道歉图像重叠我希望每个小部件上都有多个图像，然后我想添加限制容器体中的所有图像。即使添加了新图像，也应该限制在小部件体中。。在我的手机上，但会尽力帮助…站起来by@BrianPatterson当然需要澄清，请询问。如果可能的话，我会告诉你我的更新1只是一件事，为什么删除图像的选项不起作用。我在inspect element中检查了它，它分配了适当的类别。它应该可以理想地工作。你似乎不亚于你给出的解释是：如果你说像你这样的人不是专家，那我就不知道该怎么说了grounds@Scarmouche当我删除所有图像，然后通过按钮添加任何图像时，textarea没有得到更新的原因是什么？我试图更改更新textarea的功能部分。我还对密码

//EDITS
var parentLI;
$(document).on("click", ".addmorebrands", function() {
    parentLI = $(this).closest('li');
    $('#exampleModalCenter').modal('show');
    $('#exampleModalCenter img').click(function(){
        $(this).addClass('preselect');
        $(this).siblings().removeClass('preselect');
        selectedImageSRC = $(this).attr('src');
    });
});

$('#add-image').click(function(){
    parentLI.append('<div class="imagewrap"><img src="'+selectedImageSRC+'"> 
    <input type="button" class="removediv" value="X" /></div>');
    parentLI.children('textarea')
       .append(', '+selectedImageSRC);
    $('#exampleModalCenter').modal('hide');
});

.preselect{
  border: 2px solid white;
  background: green
}

.preselect:hover{
  border: 1px solid white;
  background: lightgreen
}

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

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