Как удалить конкретное значение из массива с помощью jQuery


419

У меня есть массив, который выглядит так: var y = [1, 2, 3];

Я хотел бы удалить 2из массива y.

Как я могу удалить определенное значение из массива, используя jQuery? Я пытался, pop()но это всегда удаляет последний элемент.


8
ВНИМАНИЕ : некоторые из наиболее часто задаваемых ответов могут иметь побочные эффекты, например, выполнение неправильных операций, когда массив не содержит удаляемого элемента. Пожалуйста, используйте их с осторожностью .
Рикардо

Этот ответ работал для меня, с простым javascript: stackoverflow.com/a/5767357/4681687
chimos

см. мой комментарий под использованием splice () и $ .inArray (), я решил эту проблему БЕЗ использования цикла, и он чистый.
user253780

Ответы:


619

Работающий JSFIDDLE

Вы можете сделать что-то вроде этого:

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

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

Результат:

[1, 3]

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


2
Это хорошая новость, и да, нужная модификация была необходима :)
Sarfraz

2
Я думаю, что ответ @ user113716 относительно метода JS по умолчанию является правильным способом. Любой нативный метод всегда будет предпочтительнее и быстрее.
neoswf

114
Разве этот ответ не совсем неправильный? Он создает новый массив с отсутствующим элементом, а не удаляет элемент из массива. Это совсем не одно и то же.
Джеймс Мур

5
Это удаление со сложностью O (n) ... чем больше значений в массиве, тем хуже будет ...
Lyth

2
Сложность O (n) не является проблемой.
Омар Тарик

370

С помощью jQuery вы можете выполнить однострочную операцию, например:

Пример: http://jsfiddle.net/HWKQY/

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

Использует натив .splice()и JQuery $.inArray().


13
@Elankeeran - Пожалуйста. : о) Должен заметить, что это удалит только первый экземпляр. Если есть несколько, которые будут удалены, это не сработает.
user113716

7
Я также изменил removeItem на значение, которое НЕ существует в массиве, и он удалил последний элемент в массиве. Используйте это, если вы не уверены в существовании удаленного элемента: y = $ .grep (y, function (val) {return val! = RemoveItem;});
Солберн

52
ВНИМАНИЕ! Может удалить неправильный предмет! $ .inArray возвращает -1, если значение отсутствует, а .splice обрабатывает отрицательный индекс как «с конца», поэтому, если значение, которое вы пытаетесь удалить, отсутствует, вместо него будет удалено другое значение. Также $ .grep удалит все вхождения, тогда как этот метод удалит только первое.
Райан Уильямс

1
Чтобы устранить обе проблемы, описанные выше, используйте whileцикл и временную переменную, подобную этой:var found; while ((found = $.inArray(removeItem, y)) !== -1) y.splice(found, 1);

1
Хотя с ES5 намного лучше, чем с .indexOf()jQuery, потому что вы можете использовать последний найденный индекс в качестве отправной точки для следующего поиска, что гораздо эффективнее, чем каждый раз искать весь массив. var found=0; while ((found = y.indexOf(removeItem, found)) !== -1) y.splice(found, 1);

51

jQuery.filterМетод полезен. Это доступно для Arrayобъектов.

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/

В 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
Кажется, работает лучше всего из предложенных решений, хотя на самом деле это не изменение существующего массива, а создание нового. Он также работает с несуществующими значениями или пустым массивом. Я провёл быструю проверку производительности в JSFiddle: для массива с 800.000 значений потребовалось около 6 секунд. Не уверен, что это быстро, хотя.
Flo

2
Это решение использует фильтр функций высокого порядка vanilla JS, а не метод фильтра jQuery.
Калима

Я люблю это! Кажется, это лучшее решение, хотя это не jquery ...
Сэм

36

Вы можете использовать underscore.js . Это действительно делает вещи простыми.

В вашем случае весь код, который вам придется написать, -

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

и результат будет [1,3].

Это уменьшает код, который вы пишете.


34

Не способ jQuery, но ... Почему бы не использовать более простой способ. Удалить 'c' из следующего массива

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

Вы также можете использовать: (Примечание для себя: не изменяйте объекты, которые вам не принадлежат )

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']

Добавлять прощеa.push('c')


9
Не работает Удаляет последний элемент в массиве, если не найден.
Тимоти Аарон

7
indexOf не поддерживается в IE8-.
Буд

1
Работал отлично, спасибо.
Джей Момая

22

Удалить элемент в массиве

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

Пример использования

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]]

Чтобы использовать эту функцию-прототип, вам нужно вставить ее в свой код. Затем вы можете применить его к любому массиву с «точечной нотацией»:

someArr.remove('elem1')

Немного больше объяснений не пропустите здесь!
Газ Зима

Чтобы использовать эту функцию-прототип, вам нужно вставить ее в свой код. Затем вы можете применить его к любому массиву с «точечной нотацией», например: someArr.remove ('elem1')
yesnik

3
Единственная проблема с чем-то вроде этого состоит в том, что он перезаписывает метод удаления глобального объекта Array, что означает, что любой другой код в проекте, который зависит от поведения по умолчанию, заканчивается ошибочным поведением.
jmort253

2
Другая проблема заключается в том, что глобальная переменная iперезаписывается.
Роланд Иллиг


5

Вы можете использовать функцию .not так:

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

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

2
Это уничтожит весь массив, если значение там отсутствует, поэтому searchValue = 4 вернет пустой массив.
Джулиан К

3
Я скопировал код в jsfiddle, изменил searchValueна 4, запустил код, проблем не обнаружено. Все значения все еще присутствовали. @ JulianK
RST

4

Моя версия ответа пользователя 113716. Его удаляет значение, если совпадение не найдено, что не хорошо.

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

var i = $.inArray(removeItem,y)

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

alert(y);

Теперь это удаляет 1 элемент, если совпадение найдено, и 0, если совпадений не найдено.

Как это работает:

  • $ .inArray (value, array) - это функция jQuery, которая находит первый индекс valueвarray
  • Приведенное выше возвращает -1, если значение не найдено, поэтому убедитесь, что я действительный индекс, прежде чем мы удалим. Удаление индекса -1 означает удаление последнего, что здесь не поможет.
  • .splice (индекс, количество) удаляет countколичество значений , начиная с index, так что мы просто хотим countиз1

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

Существует простое решение сращивания. Согласно W3School синтаксис сплайсинга следующий;

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

Индекс Обязательный. Целое число, указывающее, в какой позиции добавлять / удалять элементы. Используйте отрицательные значения, чтобы указать позицию в конце массива.

Howmany Обязательно. Количество предметов, которые будут удалены. Если установлено в 0, элементы не будут удалены

item1, ..., itemX Необязательно. Новый элемент (ы) для добавления в массив

Имейте это в виду, что следующие js извлекут один или несколько совпадающих элементов из данного массива, если они найдены, иначе не удалили бы последний элемент массива.

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;

Или

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

Итак, финал должен выглядеть следующим образом

x.splice( startItemIndex , itemsFound );

Надеюсь это поможет.


3

Сначала проверяет, существует ли элемент в массиве

$.inArray(id, releaseArray) > -1

строка выше возвращает индекс этого элемента, если он существует в массиве, иначе он возвращает -1

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

Теперь строка выше удалит этот элемент из массива, если он найден. Подводя итог приведенной ниже логике, необходим код для проверки и удаления элемента из массива.

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

2

У меня была похожая задача, где мне нужно было удалить несколько объектов одновременно на основе свойства объектов в массиве.

Итак, после нескольких итераций я получаю:

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

2

Я бы расширил класс Array с помощью pick_and_remove()функции, например:

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

Хотя это может показаться немного многословным, теперь вы можете вызывать pick_and_remove()любой массив, какой захотите!

Применение:

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

Вы можете увидеть все это в действии на тему покемонов здесь.


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;
}  

Затем вы можете вызвать функцию в любом месте вашего кода.

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"!

Это работает во всех случаях и позволяет избежать проблем, описанных выше. Надеюсь, это поможет!


2

Попробуйте это у меня работает

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

2

Второй наиболее востребованный ответ здесь - это самый близкий возможный путь к методу jQuery с одной строкой предполагаемого поведения, которого хочет OP, но они наткнулись в конце своего кода, и у него есть недостаток. Если удаляемый элемент на самом деле не находится в массиве, последний элемент будет удален.

Некоторые заметили эту проблему, а некоторые предложили способы обойти эту проблему. Я предлагаю самый короткий, самый чистый метод, который я мог найти, и я прокомментировал под их ответом способ исправления их кода в соответствии с этим методом.

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

массив x легко удалит элемент "пока", а массив y останется нетронутым.

Использование аргумента $.inArray(removeItem,array)в качестве второго аргумента на самом деле заканчивается как длина склейки. Так как элемент не был найден, это оценивается как array.splice(-1,-1);, что просто приведет к тому , что ничего не будет сращено ... все без необходимости писать цикл для этого.


1

Чтобы безопасно удалить 2 из массива, используя ванильный JavaScript:

// 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]

Polyfill источник: Mozilla


0

Просто добавив к ответу Сарфраза, удивило, что никто еще не превратил его в функцию.

Используйте ответ от ddagsan, используя метод .filter, если у вас есть одно и то же значение более одного раза в вашем массиве.

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>

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.