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

Posted 2021-05-03

所以我刚刚完成了一个正在进行的项目中的所有内容，它是一个待办事项列表，您可以在其中添加和删除列表中的项目。

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

我可以通过点击它们将每个单独删除但现在我需要使用此按钮立即清除所有这些并且这里有什么问题？

这是我尝试删除对象的代码:(它的removeelementsbyClass变量和函数）当我点击它并且我的addeventlistener被设置为单击时，该函数是否应该被激活？

而在功能本身不应该清除所有内容的列表？

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>

答案

只需要总是删除第一个元素。

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');

}