Удалить созданные элементы с именем класса DOM javascript

Question

Итак, я только что закончил все в проекте, над которым я работаю, это список дел, в который вы добавляете и удаляете элементы из списка.

Прямо сейчас, когда я добавляю задачу в список, он создает элемент с именем класса «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>

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

}