remove chosen element from array

Question

Hi I have tried using "indexOf" but still it seems like i remove the last element of the array and not the chosen element...

How I can fix this, so it is the element I choose that is being the removed and not the last or first element...

I HAVE TRIED USING "indexOf" I HAVE TRIED.... I KNOW HOW TO REMOVE AND ELEMENT BUT NOW THE ELEMENT THE POSITION I DONT KNOW HOW TO REMOVE???

function getTodoItems() {
    for (var i = 0; i < dataArray.length; i++) {
        if (!dataArray[i].listItem.length) return;
        var itemList = document.getElementById("my-todo-list");
        var list = document.createElement("li");
        itemList.appendChild(list);
        list.innerHTML = dataArray[i].listItem;
        var spanItem = document.createElement('span');
        spanItem.style.float = 'right';
        var myCloseSymbol = document.createTextNode('\u00D7');
        spanItem.classList.add("closeBtn");
        spanItem.appendChild(myCloseSymbol);
        listItems[i].appendChild(spanItem);

///////////////////////////// Relevant Section /////////////////////////////

        close[i].onclick = function() {
            var div = this.parentElement;
            div.style.display = "none";
            var position = dataArray.indexOf(dataArray[i]); // Fix denne her linje
            dataArray.splice(position, 1); // Fix denne her linje
            localStorage.setItem("itemListRecord", JSON.stringify(dataArray));
            console.log(dataArray);
        }

/////////////////////////////////////////////////////////////////////////////

        var list = document.getElementsByTagName('li');
        list[i].onclick = function() {
            this.classList.toggle("checked");
        }

    }
}

https://jsfiddle.net/headbangz/r2sx0yhz/

Here is how my code is looking

Possible duplicate of [JavaScript closure inside loops – simple practical example](https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — melpomene, Dec 30 '17 at 16:14
Also duplicate of https://stackoverflow.com/questions/5767325/how-do-i-remove-a-particular-element-from-an-array-in-javascript — Oliver Houston, Dec 30 '17 at 16:18

felixmosh · Answer 1 · 2017-12-30T19:16:35.070

You can use Array.filter in order to filter our unwanted elements.

const arr = [1, 2, 3, 4, 5];

const result = arr.filter((item) => item % 2 === 0);

console.log(result);

Your problem in the code probably related to the fact that when you set the onclick the closure is points to the i value and not incapsulate it like you probably wanted.

You can use IIFE in-order to save the i value.

close[i].onclick = (function(i){
       return function() {
            var div = this.parentElement;
            div.style.display = "none";
            var position = dataArray.indexOf(dataArray[i]); // Fix denne her linje
            dataArray.splice(position, 1); // Fix denne her linje
            localStorage.setItem("itemListRecord", JSON.stringify(dataArray));
            console.log(dataArray);
        }
}(i))

Can you come with a solution for the code I have running? No matter what I do using filter indexOf no matter what it is removing the last item — Thomas Hermansen, Dec 30 '17 at 17:31

TJBlackman · Accepted Answer · 2017-12-30T18:58:26.063

This is the issue: var position = dataArray.indexOf(dataArray[i]);

When your loop is done running, i will always refer to the index of the last item. As an example, this function looks like it might print 1, 2, 3, 4, 5. In reality, it prints 5 five times instead. By the time the console.log part actually runs, the var i is already equal to 5.:

for (var i = 0; i < 5; ++i){ setTimeout(function(){ console.log(i); }, 2000) }

^ Try pasting this into your console.

Anyway, to fix it, you need to find the index of the item in your array, where the key:value pair matches the text of the todo item you need to remove.

close[i].onclick = function(e) {
            var div = e.target.parentElement;
            var divText = div.childNodes[0].nodeValue; // use this!
            div.style.display = "none";
            var position = dataArray.findIndex(todo => todo.listItem === divText);
            dataArray.splice(position, 1);
            localStorage.setItem("itemListRecord", JSON.stringify(dataArray));
        }

Working Fiddle: https://jsfiddle.net/r2sx0yhz/3/

SideNote: This should also be changed. Try your fiddle in an incognito window to see why.

// this is bad... a user may not have anything in their localStorage yet.
var dataArray = [];
dataArray = JSON.parse(localStorage.getItem("itemListRecord"));
// do this instead.
var dataArray = JSON.parse(localStorage.getItem("itemListRecord")) || new Array();

Is that the most up to date fiddle you have? When I press the "add" button, i get errors in the console and no todo list is created — TJBlackman, Dec 30 '17 at 17:52
I just tested, it is working fine, no errors in the fiddle when i use — Thomas Hermansen, Dec 30 '17 at 17:56
I found the error, and fixed the other error that you asked about. Look at my edited answer, where I do indeed use the Array.findIndex() method. — TJBlackman, Dec 30 '17 at 18:42

remove chosen element from array

2 Answers2