Javascript 从insertAdjacentHTML单击按钮后删除Firebase条目

我试图删除FirebaseDatabase中的一些条目，但遇到问题。控制台仅在第一个条目中返回错误

Uncaught SyntaxError:Invalid或unexpected token

，对于其他条目返回

Uncaught ReferenceError:MXcLdklS39mrnk7PQEe未在HTMLButtonElement.onclick定义

代码如下：

const database = firebase.database();

var imagenBanner, count;
div = document.getElementById( 'accordion' );

database.ref(`/marketing/banners`).once('value').then(function (snap) {
    count = 1;
    snap.forEach(function (childSnapshot) {
        console.log(childSnapshot.val().titulo)
        var str =`
            <div class="card">
                <div class="card-header" id="heading${count}">
                    <h5 class="mb-0">
                        <button class="btn btn-link" data-toggle="collapse" data-target="#collapse${count}" aria-expanded="true" aria-controls="collapse${count}">
                            ${childSnapshot.val().titulo}
                        </button>
                    </h5>
                </div>
            
                <div id="collapse${count}" class="collapse show" aria-labelledby="heading${count}" data-parent="#accordion">
                    <div class="card-body">
                        Introduce el banner que se mostrara al iniciar la aplicación. Especifique las imágenes y la descripción de la página.
                        <div style="margin: 20px 50px;">
                            <div class="input-group mb-3">
                                <span class="input-group-text" id="basic-addon1">Titulo</span>
                                <input id="bannerTit${childSnapshot.key}" type="text" class="form-control" placeholder="Titulo" aria-label="Titulo" aria-describedby="Titulo" value="${childSnapshot.val().titulo}">
                            </div>
                            <div class="input-group mb-3">
                                <span class="input-group-text" id="basic-addon1">Descripción</span>
                                <input id="bannerDes${childSnapshot.key}" type="text" class="form-control" placeholder="Descripción" aria-label="Descripción" aria-describedby="Descripción" value="${childSnapshot.val().descripcion}">
                            </div>
                            <div style="width:auto; margin:0 auto; text-align: center;">
                                <img src="${childSnapshot.val().imagen}" class="d-inline-block align-middle d-lg-none" style="max-width:100%; align-self: center; display: inline-block!important;" alt="">
                            </div>
                            <div class="custom-file" style="margin: auto; text-align: center;">
                                <input type="file" class="form-control" id="inputImage${childSnapshot.key}" accept="image/*">
                            </div>
                            <p style="margin: 15px 0px; text-align: end;">
                                <button class="btn btn-dark" id="guardarButton${childSnapshot.key}" class="btn btn-sm btn-outline-secondary" onclick="saveBanner(${childSnapshot.key})">Guardar Banner</button>
                                <button class="btn btn-danger" id="eliminarButton${childSnapshot.key}" class="btn btn-sm btn-outline-secondary" onclick="deleteBanner(${childSnapshot.key})">Eliminar Banner</button>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        `;
        div.insertAdjacentHTML( 'beforeend', str );
        document.getElementById('inputImage'+childSnapshot.key).addEventListener('change', handleFileSelect, false);
        ++count;
    });
});


var storageRef = firebase.storage().ref();

function handleFileSelect(evt) {
    console.log("handleFileSelect(evt)");
    evt.stopPropagation();
    evt.preventDefault();
    file = evt.target.files[0];

    metadata = {
        'contentType': file.type
    };

    storageRef.child('banners/' + file.name).put(file, metadata).then(function(snapshot) {
        // Let's get a download URL for the file.
        snapshot.ref.getDownloadURL().then(function(url) {
            imagenBanner = url;
        });
    }).catch(function(error) {
        console.error('Upload failed:', error);
    });
}

function deleteBanner(banner) {
    console.log(banner);
    var result = confirm("Se borrara el banner de marketing. ¿Desea continuar?");
    if (result) {
        database.ref('/marketing/banners/' + banner).remove();
        location.reload();
    }
}

function saveBanner(banner) {
    console.log(banner);
    if (imagenBanner == null){
        imagenBanner = "";
    }
    database.ref('/marketing/banners/' + banner).set({
        titulo: document.getElementById("bannerTit"+banner).value,
        descripcion: document.getElementById("bannerDes"+banner).value,
        imagen: imagenBanner
    });
    location.reload();
}

function createBanner() {
    if (imagenBanner == null){
        imagenBanner = "";
    }
    database.ref('/marketing/banners/').push().set({
        titulo: document.getElementById("bannerTitNew").value,
        descripcion: document.getElementById("bannerDesNew").value,
        imagen: imagenBanner
    });
    location.reload();
}

function newBanner() {
    var str =`
        <div class="card">
            <div class="card-header" id="headingNew">
                <h5 class="mb-0">
                    <button class="btn btn-link" data-toggle="collapse" data-target="#collapseNew" aria-expanded="true" aria-controls="collapseNew">
                        Nuevo Banner
                    </button>
                </h5>
            </div>
        
            <div id="collapseNew" class="collapse show" aria-labelledby="headingNew" data-parent="#accordion">
                <div class="card-body">
                    Introduce el banner que se mostrara al iniciar la aplicación. Especifique las imágenes y la descripción de la página.
                    <div style="margin: 20px 50px;">
                        <div class="input-group mb-3">
                            <span class="input-group-text" id="basic-addon1">Titulo</span>
                            <input id="bannerTitNew" type="text" class="form-control" placeholder="Titulo" aria-label="Titulo" aria-describedby="Titulo">
                        </div>
                        <div class="input-group mb-3">
                            <span class="input-group-text" id="basic-addon1">Descripción</span>
                            <input id="bannerDesNew" type="text" class="form-control" placeholder="Descripción" aria-label="Descripción" aria-describedby="Descripción">
                        </div>
                        
                        <div class="custom-file" style="margin: auto; text-align: center;">
                            <input type="file" class="form-control" id="inputImageNew" accept="image/*">
                        </div>
                        <p style="margin: 15px 0px; text-align: end;">
                            <button class="btn btn-dark" id="guardarButtonNew" class="btn btn-sm btn-outline-secondary" onclick="createBanner()">Guardar Banner</button>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    `;
    div.insertAdjacentHTML( 'afterbegin', str );
    document.getElementById('inputImageNew').addEventListener('change', handleFileSelect, false);
}

const-database=firebase.database（）；
var imagenBanner，计数；
div=document.getElementById（'accordion'）；
database.ref（`/marketing/banners`）。一次（'value'）。然后（函数（snap）{
计数=1；
snap.forEach（函数（childSnapshot）{
console.log（childSnapshot.val（）.titulo）
var-str=`
${childSnapshot.val（）.titulo}
介绍《应用科学》杂志，特别是《植物基因》和《植物描述》。
提特罗
描述

瓜达尔旗
伊莱米纳尔旗

`;
div.insertAdjacentHTML（'beforeend'，str）；
document.getElementById（'inputImage'+childSnapshot.key.）.addEventListener（'change'，handleFileSelect，false）；
++计数；
});
});
var storageRef=firebase.storage（）.ref（）；
功能手柄文件选择（evt）{
log（“handleFileSelect（evt）”）；
evt.stopPropagation（）；
evt.preventDefault（）；
file=evt.target.files[0]；
元数据={
“contentType”：file.type
};
storageRef.child（'banners/'+file.name）.put（文件、元数据）.then（函数（快照）{
//让我们获取该文件的下载URL。
snapshot.ref.getDownloadURL（）.then（函数（url）{
imagenBanner=url；
});
}).catch（函数（错误）{
控制台。错误（'上载失败：'，错误）；
});
}
功能删除横幅（横幅）{
控制台日志（横幅）；
var结果=确认（“市场营销部的borrara el banner？持续发展部？”）；
如果（结果）{
database.ref（'/marketing/banner/'+banner）.remove（）；
location.reload（）；
}
}
函数saveBanner（banner）{
控制台日志（横幅）；
如果（imagenBanner==null）{
imagenBanner=“”；
}
database.ref（'/marketing/banner/'+banner）.set({
titulo:document.getElementById（“bannerTit”+banner）.value，
description:document.getElementById（“bannerDes”+banner）.value，
imagen:imagenBanner
});
location.reload（）；
}
函数createBanner（）{
如果（imagenBanner==null）{
imagenBanner=“”；
}
database.ref（'/marketing/banners/'）.push（）.set({
titulo:document.getElementById（“bannerTitNew”）.value，
description:document.getElementById（“bannerDesNew”）.value，
imagen:imagenBanner
});
location.reload（）；
}
函数newBanner（）{
var-str=`
新浪旗
介绍《应用科学》杂志，特别是《植物基因》和《植物描述》。
提特罗
描述

瓜达尔旗

`;
div.insertAdjacentHTML（'afterbegin'，str）；
document.getElementById（'inputImageNew'）。addEventListener（'change'，handleFileSelect，false）；
}


当我从一个条目中单击delete按钮时，应该会打开一个警报，但什么也没有发生

我已经检查了buttons元素的ID，它们都是正确的并且存在于数据库中

我希望有人能帮助我。
听起来你喜欢在线事件监听器和混乱的引用。不要使用内联侦听器，而是将事件委派到动态内容上进行侦听。如何做到这一点？要了解事件委派，请看，您还可以阅读有关的缺点。谢谢，我将看一看。除了分区之外，您的实际错误在于添加最后一个
p
元素，即字符串的参数类型（占位符的呈现值）应包装在按钮的内联侦听器中的引号中。