删除使用类名DOM Javascript创建的元素
删除使用类名DOM Javascript创建的元素
提问于 2018-09-16 04:58:27
我刚刚完成了我正在工作的项目中的所有内容，这是一个待办事项列表，您可以在该列表中添加和删除项目。
现在，当我向列表中添加一个任务时，它创建了一个类名为"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();
}这也是它在页面上的样子的图片：
所以基本上一切都在我的代码中工作，只是让按钮来清除它，我需要修复的所有东西。
下面是所有的代码：
//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">
<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>回答 1
Stack Overflow用户
发布于 2018-09-16 05:41:08
只要始终删除第一个元素即可。
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');
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52348818
复制相关文章
相似问题