CODEWITHSUNDEEP
javascripthtml
Utkarsh Tyagi
Utkarsh Tyagi

Reputation: 1489

How to remove an object from array using spilce?

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>

Upvotes: 1

Views: 83

Answers (3)

Rickard Elim&#228;&#228;
Rickard Elim&#228;&#228;

Reputation: 7591

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>

Upvotes: 1

Pranav Rustagi
Pranav Rustagi

Reputation: 2721

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>

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1074676

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).

Upvotes: 2

Related Questions