Como remover um objeto de array usando spilce?

Question

Recentemente fiz uma pergunta: ( Como remover um elemento da matriz em javascript sem fazer um novo? ).

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

Agora eu tenho que usar este array duas vezes, uma vez que preciso escolher o elemento aleatório dele e aplicar algumas propriedades nele e, em seguida, preciso abrir o elemento que apliquei as propriedades. Também é uma longa lista de elementos em array, então eu não sei seus números de índice.

Para melhor explicação

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>

Answer 1

Como eu disse em meu comentário sobre aquela outra questão , não importa o que você está procurando, indexOfvai encontrar se você passar a mesma coisa indexOfque está no array; indexOfefetivamente faz uma ===comparação.

Agora, se você quiser encontrar o índice de um objeto verificando suas propriedades, ou uma string usando uma substring, ou qualquer coisa que não seja apenas uma ===comparação, você usará findIndexcom um retorno de chamada (ou findpara encontrar o próprio objeto).

Como posso removê-los da matriz usando os valores ...

Da mesma forma: splicecom o índice da entrada (se você deseja manter o mesmo array) ou filter(se você deseja criar um novo array).

Answer 2

Verifique este snippet. Quando você seleciona elementos usando métodos como getElementsByTagName, pode não retornar array. Pode ser uma coleção HTML ou algum objeto, dependendo do método escolhido.

Como você pode ver (no console), initiallyé um object. Para alterá-lo para um array, veja como eu inicializei elements, usar [... ]Rest do código é fácil de entender. Deixe-me saber se você travar :)

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>

Answer 3

Eu obteria um número aleatório com base no comprimento de sua matriz de elemento e, em seguida, uniria a matriz com base nesse número e retornaria o valor dessa união. Esse valor, entretanto, estará em uma matriz, portanto, precisarei retornar o primeiro índice dessa matriz.

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>