JQuery 克隆元素

Question

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

$("#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 
    });
};

Answer 1

我创建了一个最小的工作示例，问题出在 HTML 的清理中。您不能在 JQuery 对象上使用 innerHTML，或者您使用它的 html 函数，或者您需要使用 $("#taskBoard")[0].[=17= 检索 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>

JQuery 克隆元素

JQuery cloned element

javascript

jquery

clone

button