JQuery 克隆元素答案

【问题标题】：JQuery cloned elementJQuery 克隆元素
【发布时间】：2021-12-31 08:03:24
【问题描述】：

我被这个问题困住了。我正在编写一个任务平台应用程序。每当我尝试保存时，任务都会自行克隆。在每次“保存更改”之后，都会有越来越多的克隆。我已经多次重写代码。但是，我仍然没有成功。请帮我找出错误。

$("#taskSave").click(() => {
    const task = {
        id: Date.now(),
        imageUrl: $("#imageInput").val(),
        title: $("#titleInput").val(),
        description: $("#descriptionInput").val(),
        type: $("#typeInput").val(),
    }; 

    $("#overlay").hide();
    todos.push(task);
    saveStorage(todos);

    // reset input values
    $("#imageInput").val("");
    $("#titleInput").val("");
    $("#descriptionInput").val("");
    $("#typeInput").val("");
});

function saveStorage(todos) {
    localStorage.setItem("todos", JSON.stringify(todos));
    display(todos);
};

function display(todos) {
    $("#taskBoard").innerHTML = "";
    // .html("");

    todos.forEach(item => {
        let c = document.createElement("div");
        c.setAttribute("class", "card");
        c.setAttribute('id', item.id);
        c.innerHTML = `
            <div class="cardTop">
                <div class="binContainer">
                    <div class="binImage"></div>
                </div>
            </div>
            <img src="${item.imageUrl}" alt="task image">
            <h2>${item.title}<h2>
            <p>${item.description}</p>
            <div class="cardType">${item.type}</div>
        `;

        $("#taskBoard").append(c);
        // end 
    });
};

【问题讨论】：

saveStorage 函数有什么作用？贴出那个函数的代码，因为在这里我没有看到特别的问题。
在这样您可以编辑您的初始问题。我编辑了你的问题。现在我检查你添加的代码。

标签： javascript jquery button clone

【解决方案1】：

我创建了一个最小的工作示例，问题在于 HTML 的清理。您不能在 JQuery 对象上使用innerHTML，或者您使用它的html 函数，或者您需要使用$("#taskBoard")[0] 检索javascript 对象。

    // You can use:

    $("#taskBoard").html("");
    // or 
    // document.getElementById("taskBoard").innerHTML  = "";
    // or 
    // $("#taskBoard")[0].innerHTML = "";

    // But not:
    // $("#taskBoard").innerHTML = "";

The working example here on JSFiddle (on SO dont work localStorage)

let todos = [];
$("#taskSave").click(() => {
    const task = {
        id: Date.now()
    }; 
    todos.push(task);
        saveStorage(todos);
});

function saveStorage(todos) {
    localStorage.setItem("todos", JSON.stringify(todos));
    display(todos);
        console.log(todos);
};

function display(todos) {
    $("#taskBoard").html("");
    // or 
    // document.getElementById("taskBoard").innerHTML  = "";
    // or 
    // $("#taskBoard")[0].innerHTML = "";
    // But not
    // $("#taskBoard").innerHTML = "";
    

    todos.forEach(item => {
        let c = document.createElement("div");
        c.innerHTML = `
            <p>${item.id}</p>
        `;

        $("#taskBoard").append(c);
    });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="taskSave">
SAVE
</button>

<div id="taskBoard">

</div>

【讨论】：