วิธีการลบค่าเฉพาะออกจากอาร์เรย์โดยใช้ jQuery


419

ฉันมีอาร์เรย์ที่มีลักษณะเช่นนี้: var y = [1, 2, 3];

ผมอยากจะเอาจากแถว2y

ฉันจะลบค่าเฉพาะออกจากอาร์เรย์โดยใช้ jQuery ได้อย่างไร ฉันได้ลองแล้วpop()แต่นั่นจะลบองค์ประกอบสุดท้ายเสมอ


8
คำเตือน : คำตอบที่ upvoted ที่สุดบางคำตอบอาจมีผลข้างเคียงเช่นการทำงานผิดพลาดเมื่ออาร์เรย์ไม่ได้มีองค์ประกอบที่จะลบออก กรุณาใช้พวกเขาด้วยความระมัดระวัง
Ricardo

คำตอบนี้ใช้ได้สำหรับฉันด้วย 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
คำตอบนี้ไม่ผิดอย่างสมบูรณ์หรือ มันกำลังสร้างอาร์เรย์ใหม่ด้วยรายการที่ขาดหายไปไม่ใช่การลบรายการออกจากอาร์เรย์ นั่นไม่ใช่สิ่งเดียวกันเลย
James Moore

5
นั่นคือการกำจัดกับความซับซ้อนของ O (n) เป็น ... ค่ามากขึ้นในอาร์เรย์ที่เลวร้ายที่สุดมันจะเป็น ...
Lyth

2
ความซับซ้อนของ O (n) ไม่ใช่ปัญหา
Omar Tariq

370

ด้วย jQuery คุณสามารถดำเนินการแบบบรรทัดเดียวดังนี้

ตัวอย่าง: http://jsfiddle.net/HWKQY/

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

ใช้พื้นเมือง.splice()และของ $.inArray()jQuery


13
@Elankeeran - ไม่เป็นไร : o) ฉันควรทราบว่าสิ่งนี้จะลบเฉพาะอินสแตนซ์แรกเท่านั้น หากมีหลายรายการที่จะลบมันจะไม่ทำงาน
user113716

7
ฉันยังเปลี่ยน removeItem เป็นค่าที่ไม่มีอยู่ในอาร์เรย์และจะลบรายการสุดท้ายในอาร์เรย์ ใช้สิ่งนี้หากคุณไม่แน่ใจเกี่ยวกับการมีอยู่ของItItem: y = $ .grep (y, ฟังก์ชั่น (val) {return val! = removeItem;});
Solburn

52
คำเตือน - อาจลบรายการผิด! $ .inArray ส่งกลับ -1 ถ้าไม่มีค่าและ. splice ปฏิบัติกับดัชนีลบว่า 'จากท้าย' ดังนั้นหากค่าที่คุณพยายามลบไม่มีอยู่ค่าอื่น ๆ จะถูกลบออกแทน ด้วย $ .grep จะลบการเกิดขึ้นทั้งหมดในขณะที่วิธีนี้จะลบเฉพาะครั้งแรก
Ryan Williams

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

50

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
วิธีการแก้ปัญหานี้ใช้ตัวกรองฟังก์ชั่นลำดับสูงของวานิลลา JS ไม่ใช่วิธีการกรอง jQuery
Kalimah

ฉันรักมัน! ดูเหมือนว่าทางออกที่ดีที่สุดแม้ว่าจะไม่ใช่ jquery ...
Sam

36

คุณสามารถใช้underscore.js 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 Winter

ในการใช้ฟังก์ชั่นต้นแบบนี้คุณจะต้องวางลงในโค้ดของคุณ จากนั้นคุณสามารถนำไปใช้กับอาร์เรย์ใด ๆ ที่มี 'dot notation' ตัวอย่างเช่น someArr.remove ('elem1')
yesnik

3
ปัญหาเดียวของบางสิ่งเช่นนี้คือมันเขียนทับวิธีการลบของ Global Array object ซึ่งหมายถึงโค้ดอื่น ๆ ในโครงการที่ขึ้นอยู่กับพฤติกรรมเริ่มต้นที่ลงท้ายด้วยพฤติกรรมบั๊กกี้
jmort253

2
ปัญหาอื่นคือตัวแปรทั่วโลกiถูกเขียนทับ
Roland Illig


5

คุณสามารถใช้. not ฟังก์ชั่นเช่นนี้:

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

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

2
สิ่งนี้จะล้างอาร์เรย์ทั้งหมดหากไม่มีค่าอยู่ในนั้นดังนั้น searchValue = 4 จะส่งคืนอาร์เรย์ว่าง
Julian K

3
ฉันได้คัดลอกรหัสไปยัง jsfiddle เปลี่ยนsearchValueเป็น 4 รันโค้ดไม่พบปัญหา ค่าทั้งหมดยังคงปรากฏอยู่ @ 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) เป็นฟังก์ชัน jQuery ซึ่งค้นหาดัชนีแรกของ a valueในarray
  • ด้านบนส่งคืน -1 หากไม่พบค่าดังนั้นให้ตรวจสอบว่า i เป็นดัชนีที่ถูกต้องก่อนที่เราจะทำการลบ การลบดัชนี -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)

ดัชนีที่ ต้องการ จำนวนเต็มที่ระบุตำแหน่งที่จะเพิ่ม / ลบรายการใช้ค่าลบเพื่อระบุตำแหน่งจากจุดสิ้นสุดของอาร์เรย์

เท่าไหร่จำเป็นต้องใช้ จำนวนรายการที่จะลบ หากตั้งค่าเป็น 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);

ในขณะที่มันอาจดูเหมือน verbose เล็กน้อยคุณสามารถโทร 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);

array xจะลบองค์ประกอบ "bye" อย่างง่ายดายและ array yจะไม่ถูกแตะต้อง

การใช้อาร์กิวเมนต์$.inArray(removeItem,array)เป็นอาร์กิวเมนต์ที่สองจริง ๆ แล้วจบลงด้วยความยาวเพื่อประกบกัน เนื่องจากไม่พบรายการสิ่งนี้จะประเมินarray.splice(-1,-1);ซึ่งจะส่งผลให้ไม่มีการต่อเชื่อม ... ทั้งหมดโดยไม่ต้องเขียนลูปสำหรับสิ่งนี้


1

วิธีลบ 2 ออกจากอาร์เรย์อย่างปลอดภัยโดยใช้ vanilla 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

เพียงเพิ่มคำตอบจาก Sarfraz ไม่มีใครแปลกใจที่ทำให้มันกลายเป็นฟังก์ชั่น

ใช้คำตอบจาก 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>

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.