How to remove an object from array using spilce?

Question

I recently asked a question of (How to remove an element from array in javascript without making a new?).

b1 = document.getElementById('b1')
b2 = document.getElementById('b2')
myArray = [b1 , b2];

Now I have to use this array twice once i need choose random element from it and apply some properties on it and second i need to pop the element i have applied properties. Also its a long list of elements in array so i dont know their index numbers.

For better explanation

blocks = [document.getElementById("b1"),document.getElementById("b2"),document.getElementById("b3"),document.getElementById("b4"),document.getElementById("b5"),document.getElementById("b6"),document.getElementById("b7"),document.getElementById("b8"),document.getElementById("b9")]

//first use
function autoChance(){
    const randomBlock = blocks[Math.floor(Math.random() * blocks.length)];
    randomBlock.style.backgroundColor='blue';
}

//second use
function b1Click(){
    b1.style.backgroundColor="red"
    const index = blocks.indexOf('document.getElementById("b2")');
    blocks.splice(index, 1);
    console.log(blocks)
    autoChance()
}

//If u see in console its removing the last item

.blocks{
    width: 310px;
    height: 304px;
    overflow-wrap: normal;
    background-color: aqua;
}
#b1,#b2,#b3,#b4,#b5,#b6,#b7,#b8,#b9{
    width: 100px;
    height: 100px;
    position: relative;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="blocks">
        <button id="b1" onclick="b1Click()"></button>
        <button id="b2" onclick="b2Click()"></button>
        <button id="b3" onclick="b3Click()"></button>
        <button id="b4" onclick="b4Click()"></button>
        <button id="b5" onclick="b5Click()"></button>
        <button id="b6" onclick="b6Click()"></button>
        <button id="b7" onclick="b7Click()"></button>
        <button id="b8" onclick="b8Click()"></button>
        <button id="b9" onclick="b9Click()"></button>
    </div>
    <script src="script.js"></script>
</body>
</html>

What do you mean by "using the values"? Please add an actual example. — str
– str, Commented Oct 4, 2020 at 7:41
I dont know the index number of those object so I want to remove them using their names as shown in example using "c" to first get its index value and then removing it.. — Utkarsh Tyagi
– Utkarsh Tyagi, Commented Oct 4, 2020 at 7:42
Please add your code together with a minimal reproducible example and the complete error message. — str
– str, Commented Oct 4, 2020 at 7:44
@UtkarshTyagi That's why you should use findIndex, not indexOf. — Barmar
– Barmar, Commented Oct 4, 2020 at 7:45
This question should show the array of objects you're trying to search, not the code that was solved in the previous question. — Barmar
– Barmar, Commented Oct 4, 2020 at 7:47

T.J. Crowder · Accepted Answer · 2020-10-04 07:45:32Z

2

As I said in my comment on that other question, it doesn't matter what it is you're looking for, indexOf will find it if you pass the same thing into indexOf that's in the array; indexOf effectively does a === comparison.

Now, if you want to find the index of an object by checking its properties, or a string using a substring, or anything that isn't just a === comparison, you'd use findIndex with a callback (or find to find the object itself).

How can i remove them from array using the values...

The same way: splice with the index of the entry (if you want to keep the same array) or filter (if you want to create a new array).

answered Oct 4, 2020 at 7:45

community wiki

T.J. Crowder

Sign up to request clarification or add additional context in comments.

Comments

Pranav Rustagi · Accepted Answer · 2020-10-04 07:53:24Z

Checkout this snippet. When you select elements using methods like getElementsByTagName, it may not return array. It might be an HTML collection or some object depending on the method you choose.

As you can see (in console), initially is an object. To change it to an array, see how I initialized elements, using [... ] Rest of the code is easy to understand. Let me know if you get stuck :)

var initially = document.getElementsByTagName('div')

console.log(typeof(initially));

var elements = [...initially];

console.log(elements);

var toSearch = document.querySelector('.four');
var ind = elements.indexOf(toSearch);
elements.splice(ind, 1);

console.log(elements);

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
<div class="six"></div>
<div class="seven"></div>

Rickard Elimää · Accepted Answer · 2020-10-04 08:05:54Z

1

I would get a random number based on the length of your element array and then splice the array based on that number and return the value from that splice. That value will, however, be in an array so I will need to return the first index of that array.

var myArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

function removeElement() {
  let randomIndex = randomize(myArray.length);
  let randomValueArr = myArray.splice(randomIndex, 1);
  let randomValue = randomValueArr[0];
  
  console.log(randomValue);
  
  return randomValue;
}

function randomize(max, min = 0) {
  return Math.floor(Math.random() * max + min)
}

<button onclick="removeElement()">Click me to remove elements</button>

answered Oct 4, 2020 at 8:05

Rickard Elimää

7,6763 gold badges18 silver badges36 bronze badges

Collectives™ on Stack Overflow

How to remove an object from array using spilce?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related