Question

所以我刚刚完成了项目中的所有工作，这是一个待办事项列表，您可以在列表中添加和删除项目。

现在，当我将任务添加到列表时，它创建了一个类名为“ produkter”的元素

我可以通过单击将它们分别移除，但是现在我需要使用此按钮一次将其清除，这是怎么回事？

这是我尝试删除对象的代码：（它的removeelementsbyClass变量和函数）当我将addeventlistener设置为click时，是否应该激活该函数？

在函数本身中不应该清除所有内容的列表吗？

var addProdukt = document.getElementById("newtodo");
var addProduktButton = document.getElementById("newtodobutton");
var errorMessage = document.getElementById("message");
var toDoList = document.getElementById("todolist");
var i;
var removeElementsByClass = document.getElementById("clearbutton");


// Händelsehanterare

addProdukt.addEventListener("keyup", checkInput, false);
addProduktButton.addEventListener("click", addProdukt1, false);
removeElementsByClass.addEventListener("click", removeElementsByClass, false);
window.onload = init;

function removeElementsByClass() {
    localStorage.clear();
}

这也是图片在页面上的外观：

https://gyazo.com/c918678d5d54b32430999e332469e728

因此，基本上所有内容都在我的代码中运行，只是为了清除所有需要修复的按钮。

下面是所有代码：

//Kod skapad av Emil Palm
"use strict";

//Variabler

var addProdukt = document.getElementById("newtodo");
var addProduktButton = document.getElementById("newtodobutton");
var errorMessage = document.getElementById("message");
var toDoList = document.getElementById("todolist");
var i;
var removeElementsByClass = document.getElementById("clearbutton");


// Händelsehanterare

addProdukt.addEventListener("keyup", checkInput, false);
addProduktButton.addEventListener("click", addProdukt1, false);
removeElementsByClass.addEventListener("click", removeElementsByClass, false);
window.onload = init;

function removeElementsByClass() {
    localStorage.clear();
}

//Initieringsfunktion

function init() {
    console.log("Initierar...");

        //Läs in Produktlista

        loadProdukter();

// Inaktivera knappen

    addProduktButton.disabled = true;

}




// Kontrollera input

function checkInput() {
    console.log("Kontrollerar input...");

    var input = addProdukt.value;

    // Kontrollera längd

    if(input.length > 4) {

        errorMessage.innerHTML = "";
        addProduktButton.disabled = false;

    } else {
        errorMessage.innerHTML = "Måste innehålla minst 5 tecken";
        addProduktButton.disabled = true;
    }
}


// Lägg till produkt

function addProdukt1() {
    console.log("Lägger till Produkt...");
// Skapar nytt element
    var input = addProdukt.value;

    var newEl = document.createElement("article");
    var newTextNode = document.createTextNode(input);
    newEl.appendChild(newTextNode);
    newEl.className = "produkter";
// lägger till i lista
    toDoList.appendChild(newEl);


    newEl.addEventListener("click", function (e) {
        e.target.remove();

        //lagra listan

        saveProdukter();

    })

    addProdukt.value = "";
    addProduktButton.disabled = true;



//Anropar lagring

saveProdukter();

}



// Spara produkter

function saveProdukter() {
    console.log("Lagrar produktlista...");

    var lagring = document.getElementsByClassName("produkter");

    var tempArr = [];

    //loopar listan
    for(i=0; i<lagring.length; i++) {
        tempArr.push(lagring[i].innerHTML);
    }


// konverterar till json sträng

var jsonStr = JSON.stringify(tempArr);

// Lagra i web storage

localStorage.setItem("produkter", jsonStr);

    console.log(tempArr);
}


//Läs in produkter

function loadProdukter() {
    console.log("Läser in Produktlista")

    // läs in och konvertera från json
    var produkter = JSON.parse(localStorage.getItem("produkter"));


    //loopa igenom

    for(i=0; i<produkter.length; i++) {



        var newEl = document.createElement("article");
        var newTextNode = document.createTextNode(produkter[i]);
        newEl.appendChild(newTextNode);
        newEl.className = "produkter";
        // lägger till i lista
        toDoList.appendChild(newEl);

        // ta bort

        newEl.addEventListener("click", function(e){
            e.target.remove();

            //lagra listan

            saveProdukter();

        })
    }

    console.log(produkter);

}

如果您还需要此处的HTML：

<body>
    <header id="mainheader">
        <div class="contain">
            <h1 id="logo">DT084G</h1>
        </div>
        <!-- /.contain -->
    </header>

    <div class="container">
        <h2>Laboration 3 - DOM och events</h2>

        <h3>Lägg till ny sak att göra</h3>

        <section id="new">
            <label for="newtodo">Att göra:</label><br>
            <input type="text" id="newtodo">&nbsp;
            <button class="btn" id="newtodobutton">Lägg till</button><br>
            <span id="message"></span>
        </section>

        <h3>Saker att göra</h3>
        <section id="todolist">

        </section>

        <button id="clearbutton" class="btn">Rensa</button>

        <footer>
            <p>Laborationsuppgift för kursen DT084G, Introduktion till programmering med JavaScript.</p>
        </footer>
    </div>
    <!-- /.container -->

    <script src="js/main.js"></script>
</body>

Answer 1

总是删除第一个元素。

var products = document.getElementsByClassName('produkter')
removeElementsByClass.addEventListener("click", remove_items, false);

function remove_items() {

for(let i = products.length; i>= 0; i--) {
    products[0].parentNode.removeChild(products[0])
}
localStorage.removeItem('produkter');

}

使用类名DOM javascript删除创建的元素

1 个答案: