JS: Random Name picker: How do I remove things from the array names[] as I remove list,,,

Question

The title won't make sense.
Ok, in this input you type a name and press add. This adds/creates a list. (i++). The list's innerHTML (input.value) gets pushed into this array names[] that we will be randomizing by pressing the "pickRancom" button.
When you click on the right border of the list, the list is removed. But the text that matches the deleted list doesn't get removed.
Like this:
list: Jack.
names[Jack];
As the Jack list is created, the text also gets pushed in the names[] array: names[Jack];
Now, when you delete the Jack list, *the Jack from the names[] array should be removed too.*
And remember that I'm just using Jack as an example. Realisticly there are gonna be more elements like: list: Jack, list: Heather, list: Jim; names[Jack, Heather, Jim];
Why I want to do this is because, Even though Jack is removed from the list, the names[] array still has Jack, so when you click pickRandom, it will still pick random Jack, instead of undefined. <- that shouldn't happen.

When Jack is removed from the list, it should also be removed from the names[].
Forgot the code again:
https://code.sololearn.com/WphlX5xuimCR/#js

Answer 1

You can use the splice() method.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

Answer 2

Your app becomes more complex now, array and splice alone cannot give you a good solution.

You need to set object {index, name} for each of the list item in the array col.

Add remove callback function for each onclick of the list item.

Remove function removes the current col[i] by using filter method.

Calling picked winner by getting the col[random]. name.

I just modified your random winner with remove item by clicking the item, please check it out.
https://code.sololearn.com/W7gc4D9i0W35/?ref=app

Answer 3

Calviղ ,
What about... like this:
First, names.push(inp.value);
Then list.innerHTML = names[i];
//list's border-right onclick: parent.removeChild(list) and delete names[this];

list.onclick = function(x){
if( x.offsetX > 134){
parent.removeChild(this);
delete names[i];
//this list's innerHTML should be removed from the names[].
//delete not working, maybe use splice

}
}

@line: 40 - 50
https://code.sololearn.com/WphlX5xuimCR/#js

Answer 4

Sorry, guys That was a lot I said. I just typed that really quickly without thinking too much.
If confused, I'll get back to you later when I can actually think. I just thought I would throw that out there.

Answer 5

Here's the code I forgot to put it in the question: https://code.sololearn.com/WphlX5xuimCR/#js

Answer 6

Ginfio well done 👍