4
I’m creating a to-do list, I can create fields with tasks, and elements with javascript, but when I click the close button, the only field that disappears is the last one. I place the created elements in an object-shaped array and assign a value to each created array, but I cannot pass this value to the exclude function so that the button deletes the entire field. What can I do?
var myNodelist = document.getElementsByTagName("LI");
var index = 0;
var array = [];
for (var i = 0; i < myNodelist.length; i++) {
var span = document.createElement("SPAN");
var txt = document.createElement("button");
var xis = document.createTextNode("\u00D7");
span.appendChild(txt);
txt.appendChild(xis);
txt.className = "close";
myNodelist[i].appendChild(txt);
}
var close = document.getElementsByClassName("close");
for (var i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
function newElement() {
var li = document.createElement("input");
var ul = document.createElement("input");
var done = document.createElement("input");
done.setAttribute("type", "checkbox");
var inputText = document.getElementById("myInput").value;
var inputDate = document.getElementById("time").value;
done.className = "checkIn";
li.value = inputText;
li.className = "valor";
ul.value = inputDate;
ul.className = "data";
var span = document.createElement("SPAN");
var txt = document.createElement("button");
var xis = document.createTextNode("\u00D7");
span.appendChild(txt);
txt.appendChild(xis);
txt.className = "close";
if (inputText === '') {
alert("Você precisa digitar algo primeiro!");
} else {
document.getElementById("recent").appendChild(done).style.width = "20px";
document.getElementById("recent").appendChild(li);
document.getElementById("recent").appendChild(ul).style.width = "90px";
document.getElementById("recent").appendChild(span);
}
array.push({
inputtexto: li,
inputdata: ul,
close: txt
})
index++;
for (var i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentNode;
div.style.display = "none";
done.style.display = "none";
li.style.display = "none";
ul.style.display = "none";
}
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<form method="POST" action="">
<label for="add-task">Título:</label>
<input type="text" id="myInput" name="titulo">
<label for="date">Prazo:</label>
<input type="date" id="time" name="data" /><br><br>
<span onclick="newElement();" class="addBtn" id="newtask" style="cursor:pointer">Add</span>
</form>
<div id="recent" class="recent">
</div>
</body>
</html>
It has several problems in the code, being one of the most direct this
close.lenght
in whichlength
is misspelled. The idea of creating all knots by hand is to learn? Because this html creation becomes much simpler by creating a string with the new html and changing directly withinnerHTML
. Thefor (var i...) { close[i] =function(){..
also has a closures problem– Isac
lenght fixed. Yes, I’m still learning so I prefer to do everything by hand and with pure javascript.Thanks if you can help me out.
– user87737