Como remover um valor específico da matriz usando jQuery


419

Eu tenho uma matriz que se parece com isso: var y = [1, 2, 3];

Eu gostaria de remover 2da matriz y.

Como posso remover um valor específico de uma matriz usando jQuery? Eu tentei, pop()mas isso sempre remove o último elemento.


8
AVISO : algumas das respostas mais votadas podem ter efeitos colaterais, por exemplo, executar operações incorretas quando a matriz não contém o elemento a ser removido. Por favor, use-os com cuidado .
Ricardo

Esta resposta funcionou para mim, com javascript simples: stackoverflow.com/a/5767357/4681687
Chimos

veja meu comentário sob o uso de splice () e $ .inArray (), resolvi esse problema SEM o uso de um loop e ele está limpo.
usar o seguinte comando

Respostas:


619

Um JSFIDDLE em funcionamento

Você pode fazer algo assim:

var y = [1, 2, 2, 3, 2]
var removeItem = 2;

y = jQuery.grep(y, function(value) {
  return value != removeItem;
});

Resultado:

[1, 3]

http://snipplr.com/view/14381/remove-item-from-array-with-jquery/


2
Isso é uma boa notícia e sim foi necessária a modificação certo :)
Sarfraz

2
Eu acho que a resposta @ user113716, em relação ao método JS padrão, é o caminho certo. Qualquer método nativo será sempre preferido e mais rápido.
neoswf

114
Esta resposta não está completamente errada? Ele está criando uma nova matriz com um item ausente, não removendo um item da matriz. Essas não são a mesma coisa.
James Moore

5
Essa é uma remoção com uma complexidade de O (n) ... os mais valores na matriz, o pior será ...
Lyth

2
A complexidade de O (n) não é um problema.
Omar Tariq

370

Com o jQuery, você pode fazer uma operação de linha única como esta:

Exemplo: http://jsfiddle.net/HWKQY/

y.splice( $.inArray(removeItem, y), 1 );

Usa o nativo .splice()e o jQuery $.inArray().


13
@ Elankeeran - De nada. : o) Devo observar que isso removerá apenas a primeira instância. Se houver vários a serem removidos, não funcionará.
user113716

7
Também alterei o removeItem para um valor que NÃO existe na matriz e ele removeu o último item da matriz. Use isso se você não tiver certeza da existência do removedItem: y = $ .grep (y, função (val) {return val! = RemoveItem;});
Solburn 26/07

52
AVISO - Pode remover o item errado! $ .inArray retorna -1 se o valor não estiver presente e .splice trata um índice negativo como 'do final'; portanto, se o valor que você está tentando remover não estiver presente, algum outro valor será removido. Além disso, $ .grep removerá todas as ocorrências, enquanto esse método removerá apenas a primeira.
Ryan Williams

1
Para corrigir os dois problemas descritos acima, use um whileloop e uma variável temporária como esta:var found; while ((found = $.inArray(removeItem, y)) !== -1) y.splice(found, 1);

1
Embora seja muito melhor com o ES5, em .indexOf()vez do jQuery, porque você pode usar o último índice encontrado como ponto de partida para a próxima pesquisa, que é muito mais eficiente do que pesquisar toda a matriz todas as vezes. var found=0; while ((found = y.indexOf(removeItem, found)) !== -1) y.splice(found, 1);

51

jQuery.filtermétodo é útil. Está disponível para Arrayobjetos.

var arr = [1, 2, 3, 4, 5, 5];

var result = arr.filter(function(elem){
   return elem != 5; 
});//result -> [1,2,3,4]

http://jsfiddle.net/emrefatih47/ar0dhvhw/

No Ecmascript 6:

let values = [1,2,3,4,5];
let evens = values.filter(v => v % 2 == 0);
alert(evens);

https://jsfiddle.net/emrefatih47/nnn3c2fo/


4
Parece funcionar da melhor maneira possível com as soluções propostas, embora na verdade não esteja alterando a matriz existente, mas criando uma nova. Também funciona com valores inexistentes ou uma matriz vazia. Rápida verificação de desempenho no JSFiddle que fiz: com uma matriz com 800.000 valores, demorou cerca de 6 segundos para ser concluída. Não tenho certeza se isso é rápido.
Flo

2
Esta solução está usando o filtro de função de alta ordem JS vanilla, NÃO o método de filtro jQuery.
Kalimah 14/12/19

Eu amo isso! Parece a melhor solução, mesmo que não seja jquery ...
Sam

36

Você pode usar underscore.js . Isso realmente torna as coisas simples.

No seu caso, todo o código que você precisará escrever é -

_.without([1,2,3], 2);

e o resultado será [1,3].

Reduz o código que você escreve.


34

Não é uma maneira jQuery, mas ... Por que não usar a maneira mais simples. Remova 'c' da seguinte matriz

var a = ['a','b','c','d']
a.splice(a.indexOf('c'),1);
>["c"]
a
["a", "b", "d"]

Você também pode usar: (Observação: não modifique objetos que você não possui )

Array.prototype.remove = function(v) { this.splice(this.indexOf(v) == -1 ? this.length : this.indexOf(v), 1); }
var a = ['a','b','c'];
a.remove('c'); //value of "a" is now ['a','b']

Adicionar é mais simplesa.push('c')


9
Não funciona Remove o último item da matriz, se não encontrado.
Timothy Aaron

7
indexOf não é suportado no IE8-.
Boude 27/09/13

1
Funcionou perfeitamente, obrigado.
Jay Momaya

22

Remover item na matriz

var arr = ["jQuery", "JavaScript", "HTML", "Ajax", "Css"];
var itemtoRemove = "HTML";
arr.splice($.inArray(itemtoRemove, arr), 1);

14
//This prototype function allows you to remove even array from array
Array.prototype.remove = function(x) { 
    var i;
    for(i in this){
        if(this[i].toString() == x.toString()){
            this.splice(i,1)
        }
    }
}

Exemplo de uso

var arr = [1,2,[1,1], 'abc'];
arr.remove([1,1]);
console.log(arr) //[1, 2, 'abc']

var arr = [1,2,[1,1], 'abc'];
arr.remove(1);
console.log(arr) //[2, [1,1], 'abc']

var arr = [1,2,[1,1], 'abc'];
arr.remove('abc');
console.log(arr) //[1, 2, [1,1]]

Para usar essa função de protótipo, você precisa colá-la no seu código. Em seguida, você pode aplicá-lo a qualquer matriz com 'notação de ponto':

someArr.remove('elem1')

Um pouco mais de explicação não daria errado aqui!
Gaz Winter

Para usar essa função de protótipo, você precisa colá-la no seu código. Em seguida, você pode aplicá-lo a qualquer matriz com 'notação de ponto', por exemplo: someArr.remove ('elem1')
yesnik

3
O único problema com algo assim é que ele substitui o método de remoção do objeto Array global, o que significa que qualquer outro código no projeto que depende do comportamento padrão acaba com o comportamento de buggy.
precisa saber é o seguinte

2
Outro problema é que a variável global ié substituída.
Roland Illig 23/05


5

Você pode usar. Not funcionar assim:

var arr = [ 1 , 2 , 3 , 5 , 8];
var searchValue = 2;

var newArr = $(arr).not([searchValue]).get();

2
Isso limpará toda a matriz se o valor não estiver lá, então um searchValue = 4 retornará uma matriz em branco.
Julian K

3
Copiei o código no jsfiddle, mudei searchValuepara 4, executei o código, não foi detectado nenhum problema. Todos os valores ainda estavam presentes. @ JulianK
RST

4

Minha versão da resposta do usuário113716. Ele remove um valor se nenhuma correspondência for encontrada, o que não é bom.

var y = [1, 2, 3]
var removeItem = 2;

var i = $.inArray(removeItem,y)

if (i >= 0){
    y.splice(i, 1);
}

alert(y);

Agora, isso remove 1 item se uma correspondência for encontrada, 0 se nenhuma correspondência for encontrada.

Como funciona:

  • $ .inArray (valor, matriz) é uma função jQuery que localiza o primeiro índice de a valueem umarray
  • O acima retornará -1 se o valor não for encontrado, portanto, verifique se i é um índice válido antes de fazer a remoção. Remover o índice -1 significa remover o último, o que não é útil aqui.
  • .splice (index, count) remove o countnúmero de valores começando em index, portanto, queremos apenas um countde1

3
//in case somebody needs something like this:  multidimensional array (two items)

var ar = [[0,'a'],[1,'b'],[2,'c'],[3,'d'],[4,'e'],[5,'f']];

var removeItem = 3;  


ar = jQuery.grep(ar, function(n) {
  return n[0] != removeItem;   //or n[1] for second item in two item array
});
ar;

3

Existe uma solução simples com emenda. De acordo com a sintaxe de emenda do W3School, a seguir;

array.splice(index, howmany, item1, ....., itemX)

índice Obrigatório. Um número inteiro que especifica em qual posição adicionar / remover itens. Use valores negativos para especificar a posição no final da matriz

howmany Obrigatório. O número de itens a serem removidos. Se definido como 0, nenhum item será removido

item1, ..., itemX Opcional. Os novos itens a serem adicionados à matriz

Lembre-se de que os js a seguir exibirão um ou mais itens correspondentes da matriz especificada, se encontrados, caso contrário, não removeriam o último item da matriz.

var x = [1,2,3,4,5,4,4,6,7];
var item = 4;
var startItemIndex = $.inArray(item, x);
var itemsFound = x.filter(function(elem){
                            return elem == item;
                          }).length;

Ou

var itemsFound = $.grep(x, function (elem) {
                              return elem == item;
                           }).length;

Portanto, a final deve se parecer com a seguinte

x.splice( startItemIndex , itemsFound );

Espero que isto ajude.


3

Primeiro verifica se o elemento existe na matriz

$.inArray(id, releaseArray) > -1

a linha acima retorna o índice desse elemento, se ele existir na matriz, caso contrário, retorna -1

 releaseArray.splice($.inArray(id, releaseArray), 1);

agora acima da linha removerá esse elemento da matriz, se encontrado. Para resumir a lógica abaixo, está o código necessário para verificar e remover o elemento da matriz.

  if ($.inArray(id, releaseArray) > -1) {
                releaseArray.splice($.inArray(id, releaseArray), 1);
            }
            else {
                releaseArray.push(id);
            }

2

Eu tive uma tarefa semelhante, na qual precisei excluir vários objetos de uma só vez, com base na propriedade dos objetos na matriz.

Então, depois de algumas iterações, acabo com:

list = $.grep(list, function (o) { return !o.IsDeleted });

2

Eu estenderia a classe Array com uma pick_and_remove()função, assim:

var ArrayInstanceExtensions = {
    pick_and_remove: function(index){
        var picked_element = this[index];
        this.splice(index,1);
        return picked_element;
    } 
};
$.extend(Array.prototype, ArrayInstanceExtensions);

Embora possa parecer um pouco detalhado, agora você pode chamar pick_and_remove()qualquer matriz que desejar!

Uso:

array = [4,5,6]           //=> [4,5,6]
array.pick_and_remove(1); //=> 5
array;                    //=> [4,6]

Você pode ver tudo isso na ação com tema de pokemon aqui.


2
/** SUBTRACT ARRAYS **/

function subtractarrays(array1, array2){
    var difference = [];
    for( var i = 0; i < array1.length; i++ ) {
        if( $.inArray( array1[i], array2 ) == -1 ) {
                difference.push(array1[i]);
        }
    }
return difference;
}  

Você pode chamar a função em qualquer lugar do seu código.

var I_like    = ["love", "sex", "food"];
var she_likes = ["love", "food"];

alert( "what I like and she does't like is: " + subtractarrays( I_like, she_likes ) ); //returns "Naughty :P"!

Isso funciona em todos os casos e evita os problemas nos métodos acima. Espero que ajude!


2

Tente isso, funciona para mim

_clientsSelected = ["10", "30", "12"];
function (removeItem) {
console.log(removeItem);
   _clientsSelected.splice($.inArray(removeItem, _clientsSelected), 1);
   console.log(_clientsSelected);
`enter code here`},

2

A segunda resposta mais votada aqui está na trilha mais próxima possível de um método jQuery de uma linha do comportamento pretendido que o OP deseja, mas eles tropeçaram no final de seu código e há uma falha. Se o item a ser removido não estiver realmente na matriz, o último item será removido.

Alguns já notaram esse problema e outros ofereceram maneiras de fazer um loop para se proteger contra isso. Eu ofereço o método mais curto e limpo que pude encontrar, e comentei na resposta deles sobre a maneira de corrigir seu código de acordo com esse método.

var x = [1, 2, "bye", 3, 4];
var y = [1, 2, 3, 4];
var removeItem = "bye";

// Removing an item that exists in array
x.splice( $.inArray(removeItem,x), $.inArray(removeItem,x) ); // This is the one-liner used

// Removing an item that DOESN'T exist in array
y.splice( $.inArray(removeItem,y), $.inArray(removeItem,y) ); // Same usage, different array

// OUTPUT -- both cases are expected to be [1,2,3,4]
alert(x + '\n' + y);

A matriz x removerá o elemento "tchau" facilmente, e a matriz y será intocada.

O uso do argumento $.inArray(removeItem,array)como segundo argumento acaba sendo o comprimento da emenda. Como o item não foi encontrado, ele avalia como array.splice(-1,-1);, o que resultará em nada ser unido ... tudo sem ter que escrever um loop para isso.


1

Para remover com segurança 2 da matriz usando JavaScript vanilla:

// Define polyfill for browsers that don't natively support Array.indexOf()
if (!Array.prototype.indexOf) {
  Array.prototype.indexOf = function(searchElement, fromIndex) {
    var k;
    if (this===null) {
      throw new TypeError('"this" is null or not defined');
    }
    var O = Object(this),
      len = O.length >>> 0;
    if (len===0) return -1;
    var n = +fromIndex || 0;
    if (Math.abs(n)===Infinity) n = 0;
    if (n >= len) return -1;
    k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
    while (k < len) {
      if (k in O && O[k]===searchElement) return k;
      ++k;
    }
    return -1;
  };
}

// Remove first instance of 2 from array
if (y.indexOf(2) > -1) {
  y.splice(y.indexOf(2), 1);
}

/* To remove all instances of 2 from array, change 'if' to 'while':
while (y.indexOf(2) > -1) {
  y.splice(y.indexOf(2), 1);
}
*/

console.log(y);  // Returns [1, 3]

Fonte de Polyfill: Mozilla


0

Apenas para acrescentar a resposta de Sarfraz, ninguém ficou surpreso ainda.

Use a resposta de ddagsan usando o método .filter se você tiver o mesmo valor mais de uma vez em sua matriz.

function arrayRemoveVal(array, removeValue){
	var newArray = jQuery.grep(array, function(value) {return value != removeValue;});
	return newArray;
}
var promoItems = [1,2,3,4];	
promoItems = arrayRemoveVal(promoItems, 3);// removes 3
console.log(promoItems);
promoItems = arrayRemoveVal(promoItems, 3);// removes nothing
console.log(promoItems);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.