二次打开模态框出现Uncaught TypeError错误求助

首次点击图片时模态框可正常加载，但关闭后再次打开时触发报错：
Uncaught TypeError: Cannot read properties of null (reading 'appendChild')
错误出现在JavaScript代码中z==0时的carusel.appendChild(div)语句处。此前移除HTML中的foreach循环，改用@Model.FirstOrDefault().getNumeroEntrega()获取模型值后出现该问题。

相关代码 #

HTML部分 #

<div class="modal" tabindex="-1" id="myModal">
    <div class="modal-dialog" id="modalDialog">
        <div class="modal-content">
            <div class="modal-header" id="modalHeader">
                <button type="button" class="btn-close" id="btnClose" onclick="CloseModal()" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body px-0" data-bs-interval="false" id="@Model.FirstOrDefault().getNumeroEntrega()">
                <div id="C_@Model.FirstOrDefault().getNumeroEntrega()" class="carousel slide carousel-dark" data-bs-interval="false">
                    <div id="Entrega_@Model.FirstOrDefault().getNumeroEntrega()" class="carousel-inner" data-bs-interval="false">
                        <!--Creacion del carousel con imagenes-->
                        <!--Fin del carousel-->
                        <button class="carousel-control-prev" type="button" data-bs-target="#C_@Model.FirstOrDefault().getNumeroEntrega()" data-bs-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Previous</span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#C_@Model.FirstOrDefault().getNumeroEntrega()" data-bs-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Next</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

JavaScript部分 #

var modal = document.getElementById("myModal"); 
while (z < result.length) {
    var carusel = document.getElementById("Entrega_" + entrega);
    if (z == 0) {
        var div = document.createElement('div');
        div.setAttribute('class', 'carousel-item active');
        let btn = document.createElement('button');
        btn.setAttribute('class', 'btn btn-primary mt-3');
        btn.textContent = "Descargar Imágen";
        let im = document.createElement('i');
        im.setAttribute('class', 'fa fa-download mx-2');
        btn.appendChild(im);
        div.appendChild(btn);
        var img = document.createElement("img");
        img.setAttribute('class', 'img-responsive img-fluid');
        img.setAttribute('id', "img01")
        div.appendChild(img);
        img.setAttribute('src', result[z].path);
        carusel.appendChild(div);
        z++;
    }
    else {
        var div = document.createElement('div');
        div.setAttribute('class', 'carousel-item');
        let btn = document.createElement('button');
        btn.setAttribute('class', 'btn btn-primary');
        btn.textContent = "Descargar Imágen";
        let im = document.createElement('i');
        im.setAttribute('class', 'fa fa-download mx-2');
        btn.appendChild(im);
        div.appendChild(btn);
        var img = document.createElement('img');
        img.setAttribute('class', 'img-responsive img-fluid');
        img.setAttribute('id', "img01")
        div.appendChild(img);
        img.setAttribute('src', result[z].path);
        carusel.appendChild(div);
        z++;
    }
}

//'X' button onclick function
function CloseModal() {
    let modal = document.getElementById('myModal');
    modal.style.display = "none";
    modal.remove();
}

问题根源 #

核心错误出在CloseModal函数中的modal.remove()：这个操作会直接把整个模态框DOM元素从页面中彻底删除。第一次打开时DOM存在，能正常找到Entrega_xxx元素；但关闭后模态框被移除，第二次打开时页面已无对应DOM，自然找不到carusel元素，导致carusel为null，调用appendChild就触发报错。

另外，原代码中所有图片都用同一个id="img01"，违反DOM唯一ID规范，也可能引发其他潜在问题。

解决方法 #

1. 修复模态框关闭逻辑（推荐） #

不要移除模态框，只隐藏它，保留DOM结构供下次使用：

function CloseModal() {
    let modal = document.getElementById('myModal');
    // 用Bootstrap官方API隐藏模态框，更规范，会自动处理背景等状态
    const bootstrapModal = bootstrap.Modal.getInstance(modal);
    bootstrapModal.hide();
    
    // 若不想用Bootstrap API，也可以保留style隐藏，但不建议
    // modal.style.display = "none";
}

2. 优化JavaScript代码（减少冗余+修复ID重复） #

合并重复逻辑，给图片设置唯一ID：

var modal = document.getElementById("myModal"); 
while (z < result.length) {
    var carusel = document.getElementById("Entrega_" + entrega);
    // 提前判断元素是否存在，避免报错
    if (!carusel) break;
    
    var div = document.createElement('div');
    // 合并类名判断
    div.className = z === 0 ? 'carousel-item active' : 'carousel-item';
    
    let btn = document.createElement('button');
    btn.className = z === 0 ? 'btn btn-primary mt-3' : 'btn btn-primary';
    btn.textContent = "Descargar Imágen";
    
    let im = document.createElement('i');
    im.className = 'fa fa-download mx-2';
    btn.appendChild(im);
    div.appendChild(btn);
    
    var img = document.createElement("img");
    img.className = 'img-responsive img-fluid';
    // 设置唯一ID，避免重复
    img.id = `img01_${z}`;
    img.src = result[z].path;
    div.appendChild(img);
    
    carusel.appendChild(div);
    z++;
}

3. 确认ID匹配 #

确保JavaScript中的entrega变量值，与HTML中@Model.FirstOrDefault().getNumeroEntrega()生成的数值完全一致，否则也会出现找不到carusel元素的情况。

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