jQueryを使用して配列から特定の値を削除する方法


419

次のような配列があります。 var y = [1, 2, 3];

2アレイから削除したいy

jQueryを使用して配列から特定の値を削除するにはどうすればよいですか?私は試しましたpop()が、それは常に最後の要素を削除します。


8
警告:最も賛成された回答の一部には副作用がある可能性があります。たとえば、削除する要素が配列に含まれていないときに誤った操作を行うなどです。注意してご使用ください
Ricardo

この答えは私のために、単純なjavascriptで
うまくいきました

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 2010

2
デフォルトのJSメソッドに関しては@ user113716の答えが正しい方法だと思います。すべてのネイティブメソッドが常に優先され、高速になります。
neoswf

114
この答えは完全に間違っていませんか?配列からアイテムを削除するのではなく、アイテムが欠落している新しい配列を作成しています。それらはまったく同じではありません。
James Moore

5
これは、O(n)の複雑さを持つ削除です...配列の値が多いほど、最悪です...
Lyth

2
O(n)の複雑さは問題ではありません。
Omar Tariq 2015

370

jQueryを使用すると、次のような単一行の操作を実行できます。

例: http : //jsfiddle.net/HWKQY/

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

ネイティブ.splice()およびjQueryのを使用し$.inArray()ます。


13
@Elankeeran-どういたしまして。:o)これは最初のインスタンスのみを削除することに注意してください。削除するものが複数ある場合、機能しません。
user113716 2010

7
また、removeItemを配列に存在しない値に変更し、配列の最後の項目を削除しました。deletedItemの存在が不明な場合は、これを使用してください:y = $ .grep(y、function(val){return val!= removeItem;});
ソルバーン

52
警告-間違ったアイテムを削除する可能性があります!$ .inArrayは、値が存在しない場合は-1を返し、.spliceは負のインデックスを「末尾から」として扱うため、削除しようとしている値が存在しない場合は、代わりに他の値が削除されます。また、$。grepはすべての出現を削除しますが、このメソッドは最初の出現のみを削除します。
Ryan Williams

1
上記の両方の問題を解決するには、使用while:ループと、このような一時的な変数var found; while ((found = $.inArray(removeItem, y)) !== -1) y.splice(found, 1);

1
.indexOf()次の検索の開始点として最後に見つかったインデックスを使用できるため、jQueryの代わりにES5 を使用する方がはるかに優れていますが、毎回配列全体を検索するよりもはるかに効率的です。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 2016

2
このソリューションは、バニラJS高階関数フィルタ、使用している、NOT jQueryのフィルタ方法を。
カリマ

大好きです!jqueryではありませんが、それが最善の解決策のようです...
Sam

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-ではサポートされていません。
Boude

1
ありがとうございます。
Jay Momaya

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

もう少し説明があればここでは見逃せません!
Gaz冬

このプロトタイプ関数を使用するには、コードに貼り付ける必要があります。次に、「ドット表記」を使用して任意の配列に適用できます。例:someArr.remove( 'elem1')
yesnik

3
このような問題の唯一の問題は、グローバルなArrayオブジェクトのremoveメソッドを上書きすることです。つまり、デフォルトの動作に依存するプロジェクト内の他のコードは、バグのある動作になります。
jmort253 2013

2
別の問題は、グローバル変数iが上書きされることです。
Roland Illig、2014年


5

次のような.not関数を使用できます。

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

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

2
これにより、値がそこにない場合は配列全体が消去されるため、searchValue = 4は空の配列を返します。
ジュリアンK

3
コードをjsfiddleにコピーし、searchValue4に変更してコードを実行しましたが、問題は検出されませんでした。すべての値はまだ存在していました。@ JulianK
RST

4

user113716の私のバージョンの答え。一致が見つからない場合、彼は値を削除しますが、これは適切ではありません。

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)は、aの最初のインデックスを見つけるjQuery関数です valuearray
  • 上記は値が見つからない場合は-1を返すため、削除を行う前にiが有効なインデックスであることを確認してください。インデックス-1を削除すると、最後のインデックスが削除されますが、ここでは役に立ちません。
  • .splice(index、count)は、でcount始まる値の数を削除するindexのでcount1

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)

インデックス 必須。アイテムを追加/削除する位置を指定する整数。配列の末尾からの位置を指定するには負の値を使用します

幾つ必須。削除するアイテムの数。0に設定すると、アイテムは削除されません

item1、...、itemX オプション。配列に追加される新しいアイテム

次のjsは、見つかった場合、指定された配列から1つ以上の一致する項目をポップします。そうでない場合、配列の最後の項目は削除されません。

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

ここで2番目に賛成の回答は、OPが望む意図された動作の1行のjQueryメソッドに最も近いトラックにありますが、コードの最後でつまずいて、欠陥があります。削除するアイテムが実際に配列にない場合、最後のアイテムが削除されます。

この問題に気づいた人もいれば、この問題を防ぐためにループする方法を提供している人もいます。私は見つけることができる最も短くてクリーンな方法を提供し、私は彼らの答えの下で、この方法に従ってコードを修正する方法についてコメントしました。

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は要素「bye」を簡単に削除し、配列yは変更されません。

引数$.inArray(removeItem,array)を2番目の引数として使用すると、実際にはスプライスする長さになります。アイテムが見つからなかったので、これはと評価されarray.splice(-1,-1);、スプライスされるものは何もありません...これのためにループを記述する必要はありません。


1

バニラJavaScriptを使用して配列から2を安全に削除するには:

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

ポリフィルソース:Mozilla


0

Sarfrazからの回答を追加するために、まだ誰も関数にしていないことに驚いています。

配列に同じ値が複数ある場合は、.filterメソッドを使用してddagsanからの回答を使用します。

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>

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.