Javascript 创建新元素时仅拼接一个元素

我试图让它成为当用户创建一个小部件，然后重新加载页面（它会出现，因为它保存在localStorage中），然后一旦创建另一个小部件，我希望能够在页面刷新之前删除旧的小部件，但它会删除用户单击的小部件和新的小部件

每次创建一个新的小部件时，它都会被分配一个属性名“id”，该值是根据localStorage中已有的内容确定的，并且它会找到下一个可用（或未使用）的id号。在将widgets数组设置回localStorage之前，它还可以从最小的id到最大的id进行排序

我已经尝试在创建小部件和加载文档时在小部件上为删除按钮附加一个单击侦听器。但那不起作用

现在，我想我必须调用一个以id为参数的函数，以便在创建新的小部件时，向附加到文档中的所有小部件添加一个单击侦听器

app.js：

function addRemoveListener(id) {
    let storageUi = localStorage.getItem('ui');
    let localUi = JSON.parse(storageUi);
    $(`#widget-${id} > span > .widget-clear`).click(() => {
        for (let i = 0; i < localUi.widgets.length; i++) {
            let thisWidget = `#widget-${id}`;

            if (localUi.widgets[i].id == id) {
                localUi.widgets.splice(i, 1)
            }

            $(thisWidget).remove();
            console.log(localUi)
        }

        let newUi = JSON.stringify(localUi);
        localStorage.setItem('ui', newUi);
    })

}

函数addRemoveListener（id）{
让storageUi=localStorage.getItem（'ui'）；
让localUi=JSON.parse（storageUi）；
$（`widget-${id}>span>.widget clear`）。单击（（）=>{
for（设i=0；i

widget.js：

static appendToDom(ui) {
        let storageUi = localStorage.getItem('ui');
        let localUi = JSON.parse(storageUi);

        for (let i = 0; i < localUi.widgets.length; i++) {
            let widget = localUi.widgets[i];


            let query = () => {
                if (widget.type == 'humidity') {
                    return `${Math.floor(ui.weather.currently.humidity * 100)}`
                } else if (widget.type == 'eye') {
                    return `${Math.floor(ui.weather.currently.visibility)}`
                } else if (widget.type == 'windsock') {
                    return `${Math.floor(ui.weather.currently.windSpeed)}`
                } else if (widget.type == 'pressure') {
                    return `${Math.floor(ui.weather.currently.pressure)}`
                } else if (widget.type == 'uv-index') {
                    return `${ui.weather.currently.uvIndex}`
                }
            }

            $('nav').after(`<div class="widget widget-${widget.size}" id="widget-${widget.id}">
                                <span>
                                    <i class="material-icons widget-clear">clear</i>
                                    <i class="material-icons widget-lock-open">lock_open</i>
                                    <i class="material-icons widget-lock">lock_outline</i>
                                </span>
                                <div class="data-container">
                                    <img src=${widget.image}>
                                    <h1> ${widget.type}: ${query()} ${widget.unit} </h1>
                                </div>
                            </div>`)
            $(`#widget-${widget.id}`).delay(1000 * i).animate({ opacity: 1 }, 1000);

            $(`#widget-${widget.id}`).css({ left: `${widget.left}`, top: `${widget.top}`, 'font-size': `${widget.dimensions[2]}` })
            $(`.widget`).draggable();

            $(`#widget-${widget.id}`).css({ width: `${widget.dimensions[0]}`, height: `${widget.dimensions[1]}` })



            addRemoveListener(i);


}

// this function is called earlier in the script when the user has selected 
// which kind of widget they want 

let makeWidget = () => {
     let newWidget = new Widget(this.size, this.id, this.image, this.type, this.unit, this.dimensions);
                        saveWidget(newWidget);
                        addRemoveListener(this.id)
                    }

static appendToDom（ui）{
让storageUi=localStorage.getItem（'ui'）；
让localUi=JSON.parse（storageUi）；
for（设i=0；i{
如果（widget.type==“湿度”）{
返回`${Math.floor（ui.weather.current.湿度*100）}`
}else if（widget.type=='eye'）{
返回`${Math.floor（ui.weather.current.visibility）}`
}else if（widget.type==“windsock”）{
返回`${Math.floor（ui.weather.current.windSpeed）}`
}else if（widget.type=='pressure'）{
返回`${Math.floor（ui.weather.current.pressure）}`
}else if（widget.type==“uv索引”）{
返回`${ui.weather.current.uvIndex}`
}
}
$（'nav'）。之后(`
清楚的
锁门
锁形轮廓
${widget.type}:${query（）}${widget.unit}
`)
$（`widget-${widget.id}'）。延迟（1000*i）。动画（{opacity:1}，1000）；
$（`widget-${widget.id}`）.css（{left:`${widget.left}`，top:`${widget.top}`，'font size':`${widget.dimensions[2]}`）
$（`.widget`）.draggable（）；
$（`widget-${widget.id}`）.css（{宽度：`widget.dimensions[0]}`，高度：`${widget.dimensions[1]}`）
addRemoveListener（i）；
}
//当用户选择时，在脚本的前面调用此函数
//他们想要什么样的小部件
让makeWidget=（）=>{
让newWidget=newWidget（this.size、this.id、this.image、this.type、this.unit、this.dimensions）；
saveWidget（newWidget）；
addRemoveListener（this.id）
}

---

在创建一个新的小部件之后，在刷新之前删除一个现有的小部件之前，我对此没有任何问题。

传递给addRemoveListener函数的id可能有问题。它可能会为任何小部件传递相同的id，因此循环将删除UI，因为

此小部件

在for循环中。请尝试添加一些控制台日志记录

function addRemoveListener(id) {
    let storageUi = localStorage.getItem('ui');
    let localUi = JSON.parse(storageUi);
    $(`#widget-${id} > span > .widget-clear`).click(() => {
        for (let i = 0; i < localUi.widgets.length; i++) {
            let thisWidget = `#widget-${id}`;

            if (localUi.widgets[i].id == id) {
                localUi.widgets.splice(i, 1)
            }

            // Move this inside the if statement above.
            $(thisWidget).remove();
            console.log(localUi)
        }

        let newUi = JSON.stringify(localUi);
        localStorage.setItem('ui', newUi);
    })
}

函数addRemoveListener（id）{
让storageUi=localStorage.getItem（'ui'）；
让localUi=JSON.parse（storageUi）；
$（`widget-${id}>span>.widget clear`）。单击（（）=>{
for（设i=0；i

或者更好的是，如果id不匹配，请重新写入以继续

function addRemoveListener(id) {
    let storageUi = localStorage.getItem('ui');
    let localUi = JSON.parse(storageUi);
    $(`#widget-${id} > span > .widget-clear`).click(() => {
        for (let i = 0; i < localUi.widgets.length; i++) {
            let thisWidget = `#widget-${id}`;

            if (localUi.widgets[i].id !== id) {
                continue;
            }

            localUi.widgets.splice(i, 1)
            $(thisWidget).remove();
            console.log(localUi)
        }

        let newUi = JSON.stringify(localUi);
        localStorage.setItem('ui', newUi);
    })
}

函数addRemoveListener（id）{
让storageUi=localStorage.getItem（'ui'）；
让localUi=JSON.parse（storageUi）；
$（`widget-${id}>span>.widget clear`）。单击（（）=>{
for（设i=0；i

您的目的是一次只显示一个小部件吗？不是。刷新页面后，它们都会显示出来（仅当localStorage中存储了任何小部件时）它们都有一个删除自身的按钮，一旦您尝试创建一个新的小部件并删除dom中已有的小部件，它就不起作用了。它会删除您单击的小部件和您刚刚创建的所有当前小部件。但是如果您创建了所有这些小部件，然后刷新，一旦它们被附加到dom中，它们就可以完美地工作，只是如果您这样做的话，它们就不会工作