Willian Fernandes

Como usar jQuery para remover um item de um Array JS

Comente »

Quem trabalha com JavaScript sabe que para remover um item de um array basta utilizar o método splice. Como o código abaixo:

frutas = ['maçã', 'banana', 'pera', 'uva'];
frutas.splice(1,1);

O código acima retira a banana do array frutas. Isso porque no 1º parâmetro do método splice informamos qual a posição do item no array que queremos remover. O 2º parâmetro indica quantos itens, contando do item que informamos, queremos remover. Sendo assim, se quisermos remover a banana e a pera basta fazer assim:

frutas = ['maçã', 'banana', 'pera', 'uva'];
frutas.splice(1,2);

Mas em muitos casos não sabemos qual a posição do item que queremos remover e sim qual o valor do item. Uma abordagem é procurar qual a posição do item percorrendo o Array e comparando os valores com o valor que temos. Um tanto quanto chato, concorda?

jQuery para todas as horas!

Como é mais que comum termos jQuery em projetos web, realizar o trabalho acima fica fácil. Pra isso precisaremos da função $.grep. Está função encontra todos os elementos de um array de acordo com uma expressão. Vamos aplicar nosso exemplo removendo a fruta banana do nosso array, mas agora não sabemos qual a posição que essa fruta se encontra no array. Nosso código ficará assim:

frutas = ['maçã', 'banana', 'pera', 'uva'];
frutas = $.grep(frutas, function(val, index) {
	return val != 'banana';
});

Com a funcão $.grep podemos ir muito além. Por exemplo, ter um array com somente os elementos que forém pares:

numeros = [1, 2, 3, 4, 5, 6, 7, 8];
pares = $.grep(numeros, function(v) {
	return v % 2 == 0;
});
 
// Valor do array pares: [2, 4, 6, 8]

A função $.grep recebe 2 parâmetros obrigatórios: o array original e uma função callback. Esse callback recebe, por sua vez, 2 parâmetros: o valor do item atual e o índice (posição) desse valor no array.
Existe um terceiro parâmetro (não obrigatório) da função $.grep chamado inverse, que por padrão tem o valor false. Esse parâmetro inverte a condição dentro do callback, fazendo exatamente o contrário que mandamos ela fazer. Se adicionarmos o parâmetro inverse no exemplo acima, teremos:

numeros = [1, 2, 3, 4, 5, 6, 7, 8];
pares = $.grep(numeros, function(v) {
	return v % 2 == 0;
}, true); // Perceba que adicionamos um novo parâmetro
 
// Valor do array pares: [1, 3, 5, 7]
// pares agora só contém os valores ímpares

Perceba que a função $.grep não altera o array original. Nos exemplos acima o array numeros continuará tendo todos os elementos.

Bom, é isso. Espero que agora remover itens de um array JavaScript utilizando o valor seja mais fácil no seu dia-a-dia.

[ATUALIZADO]

Algumas pessoas se manifestaram no Twitter dizendo que isso é errado. Realmente, existe uma forma bem simples de remover um item de um Array em JavaScript sem saber a posição desse item e sem usar jQuery. Segue abaixo:

frutas = ['maçã', 'banana', 'pera', 'uva'];
index = frutas.indexOf('banana');
frutas.splice(index, 1);

Utilizamos o indexOf para descobrir qual a posição do valor que queremos remover e depois conseguiremos utilizar o splice normalmente.

Agora, sobre a parte de retornar somente os números pares, o Nando Vieira deu uma dica boa:

[1, 2, 3, 4, 5, 6, 7, 8].filter(function(item) {
	return item % 2 == 0;
});

OBS.: Navegadores antigos não suportam a função filter(). Use por sua conta e risco.