remove array element using javascript

Question

I am new to javascript & jquery, Need to remove an element from the below array structure

[{
    "tag": "tag1",
    "description": "description1"
}, {
    "tag": "tag2",
    "description": "description2"
}, {
    "tag": "tag3",
    "description": "description3"
}]

The element to be removed is known {"tag":"tag2", "description":"description2"}.

How can i find this element and remove from the array.

Please find the code which i am using to remove an element

var actionDic = [];

actionDic.push({
    description: desc,
    tag: tag
});

The actionDic array is populated as user enter text in textinput and selects 'add' option.

var deleterow = {
    tag: "tag2",
    description: "description2"
};
var index = $.inArray(deleterow, actionDic);
if (index != -1) {
    actionDic.splice(index, 1);
}

The correct index is not obtained. Kindly let me know what wrong is in the code.

Thanks.

When you say The correct index is not obtained then Where is code of $.actionDic()? — Satpal
– Satpal, Commented Jun 24, 2014 at 12:41
I still don't see the code for the function $.actionDic(). — Cameron Tinker
– Cameron Tinker, Commented Jun 24, 2014 at 12:46
Where is code of $.actionDic()? which you are using to find index. Problem is in that function — Satpal
– Satpal, Commented Jun 24, 2014 at 12:46
sorry instead of inArray i used actionDic, please find the question updated. — user2071152
– user2071152, Commented Jun 24, 2014 at 12:49

5 revs · Accepted Answer · 2020-06-20 09:12:55Z

2

Since the comparison between the item to remove and each element in actionDic isn't trivial, you could use jQuery.grep():

actionDic = jQuery.grep(actionDic, function(elem) {
    return elem.tag == deleterow.tag && elem.description == deleterow.description;
}, true);

Demo

It performs a search using a custom search function and returns the array elements that didn't match. The result replaces the previous value of actionDic and effectively removed that one item.

Update

Unfortunately, this method could be considered heavy because a new array gets created at each invocation; both in terms of what jQuery can do and standard JavaScript functionality, this particular feature is lacking. ECMAScript 6 will have the Array.prototype.find() method that will do the job of finding the index in an array (with which you can perform the splice).

You can of course write one yourself too:

(function($) {
  $.find = function(arr, fn) {
    for (var i = 0, len = arr.length; i < len; ++i) {
      if (fn(arr[i], i, arr)) {
        return i;
      }
    }
    return -1;
  };
}(jQuery));

var index = $.find(actionDic, function(elem) {
  return elem.tag == deleterow.tag && elem.description == deleterow.description;
});

if (index != -1) {
  actionDic.splice(index, 1);
}

Demo

edited Jun 20, 2020 at 9:12

community wiki

5 revs
Jack

Sign up to request clarification or add additional context in comments.

4 Comments

Satpal Over a year ago

I think it should be != instead of = in line elem.tag = deleterow.tag

Ja͢ck Over a year ago

@Satpal Ugh, noob mistake! It should be == actually, because of the invert flag that I'm passing as the last argument.

Satpal Over a year ago

Yep true, jsfiddle.net/su3Gx I sometimes gets confused between filter and grep

Satpal Over a year ago

@user2071152, here filter example jsfiddle.net/NgaYM and downvoters comments guys

Karlen Kishmiryan · Accepted Answer · 2014-06-24 12:54:25Z

I've implemented an indexOfObject method of Array prototype in one of my projects. It searches for an index of object by the given property name and value. Here it is:

Array.prototype.indexOfObject = function(searchTerm, property) {
    for (var i = 0, l = this.length; i < l; i++) {
        if (this[i][property] === searchTerm) {
            return i;
        }
    }

    return -1;
};

You can use this method to find the index of your object using a unique property. In your case you can use it like this:

var arr = [{
    "tag": "tag1",
    "description": "description1"
}, {
    "tag": "tag2",
    "description": "description2"
}, {
    "tag": "tag3",
    "description": "description3"
}], deleteObject = {
    tag: "tag2",
    description: "description2"
};

var index = arr.indexOfObject(deleteObject.tag, 'tag');

Then you can use that index to remove the object from the array:

if (index > -1) {
   arr.splice(index, 1);
}

Here is the working example in JSFiddle.

Harpreet Singh · Accepted Answer · 2014-06-24 12:52:28Z

-1

var actionDic = [{
    "tag": "tag1",
    "description": "description1"
}, {
    "tag": "tag2",
    "description": "description2"
}, {
    "tag": "tag3",
    "description": "description3"
}]

var element = {"tag":"tag2", "description":"description2"}

for(var i=0;i<actionDic.length;i++) {
    var found = false;
    for(each in actionDic[i]) {
        if(actionDic[i][each] == element[each]) {
            found = true
        } else {
            found = false;
            break;
        }
    }
    if(found) {
        actionDic.splice(i,1);
        found=false;
    }
}

answered Jun 24, 2014 at 12:52

Harpreet Singh

2,67123 silver badges31 bronze badges

Comments

Maxwell Donathan · Accepted Answer · 2014-06-24 12:55:10Z

-1

This gets your inner array objects:

for (var x = 0; x < actionDic.length; x++){
    var arrayItem = actionDic[x];
    if (arrayItem["tag"] == "tag2"){
        alert(arrayItem["description"]);
    }
}

Working fiddle: http://jsfiddle.net/4khjp/

answered Jun 24, 2014 at 12:55

Maxwell Donathan

1,53710 silver badges12 bronze badges

Comments

Artur Boruński · Accepted Answer · 2014-06-24 13:03:58Z

-1

You can use underscore.js which contains many useful helpers for Objects, Arrays etc.

Removing array element:

array = _.reject(array, function(item) {
 return item.tag == 'tag2'; // <- if tag is unique to whole array
});

edited Jun 24, 2014 at 13:03

answered Jun 24, 2014 at 12:56

Artur Boruński

5351 gold badge3 silver badges4 bronze badges

1 Comment

Ja͢ck Over a year ago

Unfortunately, OP isn't using Underscore.

Collectives™ on Stack Overflow

remove array element using javascript

5 Answers 5

Update

4 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Update

4 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related