// create array populate with 4 list items
let arr = ['apples', 'pears', 'blackberries', 'blueberries'];
// create a function
const populateList = array => {
// create a for loop to run through list items
for (let i = 0; i < array.length; i++) {
// for each list item, create a list item element
let listItem = document.createElement('li');
// populate list item with array item in iteration
listItem.innerHTML = array[i];
// create span element
// let spanElement = document.createElement('span');
// append list item element with span item containing unicode: \u00D7
listItem.innerHTML += "<span class='close'>\u00D7</span>";
// append unordered list with list item as child element
document.getElementById('itemList').appendChild(listItem);
}
return console.log(document.getElementById('itemList').innerText);
}
function updateList () {
let selectedItem = [document.getElementById('input').value];
if (selectedItem == "") {
alert(`Please, insert an item!`);
} else {
arr.push(document.getElementById('input').value);
document.getElementById('input').value = "";
return populateList(selectedItem);
}
}
populateList(arr);
document.querySelectorAll('.close').forEach(item => {
item.addEventListener('click', deleteFunction => {
for (i=0;i<arr.length;i++)
console.log(spanElements[i].parentNode.innerText.slice(0, -1));
// Problems here: my click event triggers all list items to
// repopulate. How can I isolate a click press event so when
// I click on HTML I can retrieve a single value and remove
// that matching item from my array and repopulate the HTML
// list without the value removed?
})
})
-
Plz format properly.wazz– wazz2022-12-04 22:14:52 +00:00Commented Dec 4, 2022 at 22:14
Add a comment
|
1 Answer
You need to add id to span element so that you can get the reference to clicked element from event argument. After the click event you need to remove entry from array, clear the div container and then call populate list along with addEventListerner as old listeners will be removed.
Note - Ideal way would be too remove element directly and don't re-render the elements again and again. this way you will not be repainting and re-initialising the event listeners.
// create array populate with 4 list items
let arr = ['apples', 'pears', 'blackberries', 'blueberries'];
// create a function
const populateList = array => {
// create a for loop to run through list items
for (let i = 0; i < array.length; i++) {
// for each list item, create a list item element
let listItem = document.createElement('li');
// populate list item with array item in iteration
listItem.innerHTML = array[i];
listItem.id = `list-${array[i]}`;
// create span element
// let spanElement = document.createElement('span');
// append list item element with span item containing unicode: \u00D7
listItem.innerHTML += ("<span id='close-"+array[i]+"' class='close'>\u00D7</span>");
// append unordered list with list item as child element
document.getElementById('itemList').appendChild(listItem);
}
}
function updateList () {
let selectedItem = [document.getElementById('input').value];
if (selectedItem == "") {
alert(`Please, insert an item!`);
} else {
arr.push(document.getElementById('input').value);
document.getElementById('input').value = "";
return populateList(selectedItem);
}
}
const removeElement = (srcElementId) => {
const clickedElementId = srcElementId;
const id = clickedElementId.split('-')[1];
// removes data from array
for (i=0;i<arr.length;i++) {
if (arr[i] === id) {
arr.splice(i, 1);
}
}
}
const addClickEventListener = () => {
document.querySelectorAll('.close').forEach(item => {
item.addEventListener('click', (event) => {
removeElement(event.srcElement.id);
document.getElementById('itemList').innerHTML = '';
populateList(arr);
addClickEventListener();
});
});
}
populateList(arr);
addClickEventListener();<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Click 'x' to remove elements - </h1>
<div id='itemList'></div>
</body>
</html>