Remove element from array JavaScript

Question

I'm doing this little game,where you hear the random word from array and then click the card("container__item"). If the word matches the card, then card("container__item") becomes almost transparent and the game continues until there's no more words left. I have this code,but I can't figure out how to remove the audio from array if it matches the card. I

        let gameContainer = document.querySelector('.game__container');
        let audios = document.querySelectorAll('.audio');
        let containerItem = document.querySelectorAll('.container__item')
        let randomAudio;

        function randomInteger(min, max) {
        let rand = min + Math.random() * (max + 1 - min);
         return Math.floor(rand);
          }

         gameContainer.addEventListener('click', playGame);
          function playGame() {
             const arr = Array.from(audios);
             randomAudio = arr[randomInteger(0, arr.length - 1)];
             randomAudio.play();

          containerItem.forEach((a)=>a.addEventListener('click',guessCard));
          function guessCard(){
          if(randomAudio == this.querySelector('.audio')){
           this.style.opacity = '0.3';
             }
          else{
            audioFail.play();
              }
            }
           }

Does this answer your question? [How can I remove a specific item from an array?](https://stackoverflow.com/questions/5767325/how-can-i-remove-a-specific-item-from-an-array) — Filip, Apr 15 '20 at 10:53
[`.splice(index, 1);`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) Duplicate of https://stackoverflow.com/questions/5767325/how-can-i-remove-a-specific-item-from-an-array — Niklas E., Apr 15 '20 at 10:59

Chiel · Answer 1 · 2020-04-15T11:26:18.540

1

As pointed out in the comments you can remove an element from an array with arr.splice(index, 1);. The second argument states how many elements of the array you would want to remove, in this case just one. So, how would this work out for you? First, put the index of randomAudio in a variable. Next remove that index from the arr using splice The function playGame() will look like this:

function playGame() {
    var arr = Array.from(audios);
    var index = randomInteger(0, arr.length - 1);      
    randomAudio = arr[index];
    randomAudio.play();

    containerItem.forEach((a)=>a.addEventListener('click',guessCard));

    function guessCard() {
        if(randomAudio == this.querySelector('.audio')) {
            this.style.opacity = '0.3';
            arr.splice(index,1);
        } else{
            audioFail.play();
        }
    }
}

edited Apr 15 '20 at 11:26

answered Apr 15 '20 at 11:06

Chiel

977
1
7
23

Nope,it doesn't work. It keeps repeating the same words in array – Viachaslau Zharko Apr 15 '20 at 11:15
@ViachaslauZharko with each new question, do you run `playGame` again? If that is the case you will have to place `const arr = ...` outside the function. – Chiel Apr 15 '20 at 11:25
I've placed conast arr outside the function.For some reason it removes two elements from array. – Viachaslau Zharko Apr 15 '20 at 11:35
Can you check how many times `arr.splice(index,1);` is getting called? For example by putting `console.log(arr)` after `arr.splice(index,1)` in `if(randomAudio == this.querySelector('.audio')) {` ? – Chiel Apr 15 '20 at 11:43
First time it is called once,then twice ,three times and so on – Viachaslau Zharko Apr 15 '20 at 11:49
In that case: this is probably because you add the guessCard onclick event every time you run the `playGame` function. This will result in: ` onclick="guessCard(); guessCard(); guessCard(); guessCard();" ` after running `playGame` 4 times. You will want to prevent this by either placing `containerItem.forEach((a)=>a.addEventListener('click',guessCard));` outside the `playGame` function or adding `onclick="guessCard();"` manually to each element. (hope this helps) – Chiel Apr 15 '20 at 12:09

score 0 · Answer 2 · answered Apr 15 '20 at 11:06

There are different methods and techniques you can use to remove elements from JavaScript arrays:

array.pop() - Removes from the End of an Array
array.shift() - Removes from the beginning of an Array
array.splice(0, 2) - removes from a specific Array index (here starting at index position 0, remove two elements)
array.filter(function(){ ...}) - allows you to programatically remove elements from an Array

Remove element from array JavaScript

2 Answers2