无法使用 JavaScript 从输入中删除图像

问：

我在 HTML 和 JavaScript 下面有这段代码。有一个PHP代码可以成功地将所有内容发送到数据库，不需要显示。

<form action="" method="post" enctype="multipart/form-data">
    <label for="titulo">Título:</label>
    <input type="text" id="titulo" name="titulo" required><br><br>

    <label for="descricao">Descrição:</label><br>
    <textarea id="descricao" name="descricao" required></textarea><br><br>
    <div id="preview"></div>
    <label for="imagens">Imagens:</label>
    <input type="file" id="imagens" name="imagens[]" multiple accept="image/*">
    <small>(Você pode selecionar várias imagens segurando a tecla Ctrl)</small><br><br>

    <input type="submit" value="Cadastrar Anúncio">
</form>

<script>
    (function() {
        function previewImages() {
            var input = document.getElementById("imagens");
            var preview = document.getElementById("preview");
            preview.innerHTML = ""; // Limpa a prévia de imagens anterior

            if (input.files && input.files.length > 0) {
                for (var i = 0; i < input.files.length; i++) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        var imageContainer = document.createElement("div");
                        imageContainer.className = "image-container";

                        var image = document.createElement("img");
                        image.src = e.target.result;
                        image.style.maxWidth = "100px"; // Define a largura máxima das miniaturas
                        imageContainer.appendChild(image);

                        var deleteButton = document.createElement("button");
                        deleteButton.innerText = "Deletar";
                        deleteButton.className = "delete-button";
                        deleteButton.addEventListener("click", function() {
                            // Função para deletar a imagem
                            imageContainer.parentNode.removeChild(imageContainer);
                            // Desanexar a imagem do input file
                            //input.value = "";
                        });
                        imageContainer.appendChild(deleteButton);

                        preview.appendChild(imageContainer);
                    };
                    reader.readAsDataURL(input.files[i]);
                }
            }
        }

        // Adicione o evento onchange ao campo de entrada de arquivo fora das tags HTML
        var imagensInput = document.getElementById("imagens");
        imagensInput.onchange = previewImages;
    })();
</script>

问题在于，当我单击图像缩略图下方出现的“删除”按钮时，它实际上删除了缩略图，并且似乎删除了临时文件。

这是已经显示的代码的隔离部分，负责删除图像缩略图。

var deleteButton = document.createElement("button");
deleteButton.innerText = "Deletar";
deleteButton.className = "delete-button";
deleteButton.addEventListener("click", function() {
    // Função para deletar a imagem
    imageContainer.parentNode.removeChild(imageContainer);
    // Desanexar a imagem do input file
    //input.value = "";
});
imageContainer.appendChild(deleteButton);

preview.appendChild(imageContainer);

但是，附加到输入的所有图像（为多个文件创建）都将发送到数据库，包括被按钮删除的图像。

正确的做法是保留被按钮删除的图像，并防止将其发送到数据库。

我已经在其他线程中阅读了给出此解决方案的答案：

reader.onload = function(e) {
//rest of code omitted
      input.value = "";
});

但这不起作用，因为当您插入这行代码时，所有图像都会被删除，而不是唯一选择的图像。

我该如何解决？