Javascript remove element from Ghost array

In this article we will learn how to remove element from javascript ghost array. I will also show you the way to remove any element from non-ghost arrays.

First of all, you should know the meaning of ghost arrays. I am referring them as arrays which keeps on increasing. Suppose you remove 1 item and it grows by 3 more items by itself. It can only stop increasing in size when it gets empty. So, we need to be quick to remove all items.

Code Example 1 – Remove Element from Simple Array

To remove an element from simple array, we can use splice() method.

Remove element using index –

const myArr = ["Captain America", "Hawkeye", "Iron Man", "Thor"];

// myArr.splice(indexOfValueToRemove, numberOfValuesToRemove);

console.log(myArr.splice(2, 1));
// Output: ["Captain America", "Hawkeye", "Thor"]

If you want to learn more about splice(), then check out this article (opens in new tab) –

javascript array splice() add remove values auto adjusting size

Remove elements using Javascript array splice()

Remove element using value –

const myArr = ["Captain America", "Hawkeye", "Iron Man", "Thor"];

const valueToRemove = 'Hawkeye';
const valueIndexInMyArray = myArr.indexOf(valueToRemove);

if(valueIndexInMyArray > -1){
  console.log(myArr.splice( valueIndexInMyArray, 1 ));
} else {
  console.log("Error: "+ valueToRemove +" doesn't exist in myArray");
}

Code Example 2 – Remove Element from Ghost Array

Let us first create a ghost array –

const ghostArray = [1,2,3,4,5];
var counter = 6;

const expandGhostArray = () => {
  if(ghostArray.length > 0){
    var randomSpeed = Math.ceil(Math.random() * 1000);
    ghostArray.push(counter++);

    document.getElementById('ghostarray').innerHTML = JSON.stringify(ghostArray);

    setTimeout(expandGhostArray, randomSpeed);
  }
}

According to our definition, a ghost array keeps on increasing randomly. It only stops when it gets empty. So, our goal is to empty this array as soon as possible otherwise it can take over the planet.

In the above code, we are defining a randomSpeed variable whose value will be <= 1000. So, the speed of adding a value in ghost array will always be less than 1 second. That’s why it could expand very fast.

Now we will write the code to remove element from this javascript ghost array with the click of button. The goal is to press this button rapidly in order to stop the ghost from growing.

const removeElementFromGhostArray = () => {
  if(ghostArray.length > 0){
    var randomIndexToRemove = Math.ceil(Math.random() * (ghostArray.length - 1));
    var removedItem = ghostArray.splice(randomIndexToRemove, 1);
    document.getElementById('removelogs').innerHTML = `Removed: ${removedItem}<br>${document.getElementById('removelogs').innerHTML}`;
  }
}

Here we have declared a function removeElementFromGhostArray() which will remove one element from our ghost array. It first checks if array is already empty and accordingly decides the next steps.

If array is empty, then it does nothing otherwise selects an index randomly. It then removes the element from that index using splice() function.

The complete code will look like this –

<!DOCUMENT HTML>
<html>
  <head></head>
  <body>
    <div>
      <p>
         <button onclick="expandGhostArray()">Start Ghost</button>
      </p>
         
      <p>
         <b>Ghost Array: </b>
         <span id="ghostarray"></span>
      </p>

      <div style="overflow: auto;">
         <div id="removelogs" 
              style="height: 200px; 
                     border: 1px solid; 
                     width: 120px; 
                     overflow: auto; 
                     float: left;">
         </div>
         <div>
             <button onclick="removeElementFromGhostArray()">Fight With Ghost</button>
         </div>
      </div>
    </div>
    <script>
      const ghostArray = [1,2,3,4,5];
      var counter = 6;

      const expandGhostArray = () => {
        if(ghostArray.length > 0){
          var randomSpeed = Math.ceil(Math.random() * 1000);
          ghostArray.push(counter++);

          document.getElementById('ghostarray').innerHTML = JSON.stringify(ghostArray);

          setTimeout(expandGhostArray, randomSpeed);
        }
 else {
          document.getElementById("ghostarray").innerHTML = JSON.stringify(
ghostArray
);
        }
      }

      const removeElementFromGhostArray = () => {
        if(ghostArray.length > 0){
          var randomIndexToRemove = Math.ceil(Math.random() * (ghostArray.length - 1));
          var removedItem = ghostArray.splice(randomIndexToRemove, 1);
          document.getElementById('removelogs').innerHTML = `Removed: ${removedItem}<br>${document.getElementById('removelogs').innerHTML}`;
        }
      }
    </script>
  </body>
</html>

Tweet this to help others