i'm trying to make some sort of a to do list. When i click the save button, it creates a new li with the input value, and it creates another ul's li with a remove button. What i want now is to click the remove button and it remove that li. For some reason just the first button removes it, and it removes each li from first to last.
This the html:
<input type="text" id="itemname">
<button id="save">Salvar</button>
<main id="lists">
<ul id="itemlist"></ul>
<ul id="listbutton"></ul>
</main>
And here's the js:
let list = document.getElementById("itemlist")
let buttonList = document.getElementById("listbutton")
let listItem = document.getElementById("itemname")
let button = document.getElementById("save")
button.onclick = saveItem
function removeitem(){
let newli = document.querySelector("#itemlist li")
list.removeChild(newli)
}
function saveItem(){
list.innerHTML += '<li>'+listItem.value+'</li>'
buttonList.innerHTML += '<li id="newitem"><button id="removebutton">Remover</button></li>'
let delBtn = document.querySelector("#listbutton button")
delBtn.onclick = removeitem
}
You might want to use the Event.target in your event listener:
function removeitem(event){
let newli = event.target.closest('li');
list.removeChild(newli);
}
Edit: Additionally you're only attaching the event listener to one element, because querySelector only returns the first match. To attach the event listener to all elements, you'd need to either iterate:
let delBtns = document.querySelectorAll("#listbutton button");
[...delBtns].forEach(el=> el.onclick = removeitem);
Or alternatively you'd need to attach a single event listener to a higher element, which would take advantage of event bubbling:
let parentElement = document.querySelector("#listbutton")
parentElement.onclick = removeitem;
This is using Element.closest as the most robust/stable solution, but in your example since the button is a direct child of the li tag you could also take the simpler approach and use event.target.parentElement. But if you changed the DOM structure in the future this could break.
Try this, I've made some small tweaks to make it a little smoother.
// Create a "close" button and append it to each list item
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
myNodelist[i].appendChild(span);
}
// Click on a close button to hide the current list item
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
close[i].onclick = function () {
var div = this.parentElement;
div.style.display = "none";
}
}
// Add a "checked" symbol when clicking on a list item
var list = document.querySelector('ul');
list.addEventListener('click', function (ev) {
if (ev.target.tagName === 'LI') {
ev.target.classList.toggle('checked');
}
}, false);
// Create a new list item when clicking on the "Add" button
function newElement() {
var li = document.createElement("li");
var inputValue = document.getElementById("myInput").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === '') {
alert("You must write something!");
} else {
document.getElementById("myUL").appendChild(li);
}
document.getElementById("myInput").value = "";
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7"); // x for remove item
span.className = "close";
span.appendChild(txt);
li.appendChild(span);
for (i = 0; i < close.length; i++) {
close[i].onclick = function () {
var div = this.parentElement;
div.style.display = "none";
}
}
}<input type="text" id="myInput" placeholder="Title...">
<button onclick="newElement()" class="addBtn">Salvar</button>
<main id="lists">
<ul id="myUL"></ul>
</main>