Question

我想在我的Javascript中添加也可以进入html的ID，因此我可以将ID分配给onclick remove.Div中包含未在数据库中上传的图像。基本上是带有一个小按钮的预览在其上将“ x”标记为delete。x会删除onclick本身，但我想删除x所在的div，因此我需要ID，以便删除Image +“ x”。除了进入新创建的Divs的ID外，我已经进行了所有设置，因此我可以为此做好删除动作。

我试图向.div中添加一个带有.html的变量，我想在其中分配ID，但是它不起作用。它说未分配变量。

JS：

  $(function() {
    // Multiple images preview in browser
    var imagesPreview = function(input, placeToInsertImagePreview) {

        if (input.files) {
            var filesAmount = input.files.length;


            for (i = 0; i < filesAmount; i++) {
                var reader = new FileReader();

                reader.onload = function(event) {

                    $('<div class="previewdeleter position-relative" data-item-id-div="[i]" style="height:200px;width: 200px; display: inline-block; position: relative !important;">' +
                        '<img alt="" src='+event.target.result+' style="height:200px;width: 100%; display: inline-block;">' +
                        '<div class="position-absolute" style="top: 0;right: 0;">' +
                        '<img src="/x.png" class="image-deletepreview" style="height: 20px; display: inline-block;"></div></div>')
                        .appendTo(placeToInsertImagePreview);


                    $('.image-deletepreview').on('click', function(e) {
                        e.preventDefault();
                        var deletepreview = $(this).remove();
                        console.log(deletepreview);

                    });

                }
                reader.readAsDataURL(input.files[i],);
            }

        }


    };

HTML：

<div id="previewHolder" data-item-id-div="[i]" multiple=""  class="previewdeleter position-relative">
                    <div class="position-absolute delete-image">
                    </div>
                </div>

Answer 1

您的问题令人困惑，但根据我的说法，您可以使用用于创建元素并添加ID的DOM，

const div = document.createElement('div');
div.id = 'myid';

Answer 2

基本上，我只是更改了代码：

                    var deletepreview = $(this).remove();

收件人：

                        var deletepreview = $(this).parent().parent().remove();

我所做的是代替ID，我只是带了我要删除的图像的父项。在这种情况下，我必须上2个父母，因为我彼此之间有2个图像。

如何使用Javascript将变量添加到HTML中

2 个答案: