Deleting an instance of a JavaScript Object

Question

I have a JavaScript Object called box_brick:

function box_brick( attribute1, attribute2, etc )
{
    this.attribute_1 = attribute1;
    this.attribute_2 = attribute2;
    this.attribute_etc = etc;

    box_brick.instances.push(this);
}

I create new box_bricks by declaring them:

var box_62 = new box_brick('new attribute 1', 'new attribute 2', 'etc');

This works well for my application, and gives me box_brick.instances:

The way my code is set up, each time a new box is created, I have both the instance in box_brick.instances, as well as a standalone object, which I can then call directly to get information from. For example, to get brick_60's color, I can just invoke brick_60.box_color, and in this case I would receive '#ff008c'.

(These may be one and the same -- I am still a little unclear on the difference between objects, instances, classes, and so on, for which I apologize)

For the life of me I cannot figure out how to delete one of these box_bricks from the box_brick.instances -- for example, if I wanted to delete brick_60, so that it's not longer in box_brick.instances, I'm not sure how I would go about doing it.

I've tried doing brick_60.delete, delete(brick_60); and many other things, but am fully stumped.

Any guidance would be greatly appreciated.

How can ` box_brick.instances.push(this);` even work if its invalid code? — Robert
– Robert, Commented Sep 8, 2015 at 1:35
@Robert Rocha Presumably he has initialized box_brick.instances to [] somewhere. — user663031
– user663031, Commented Sep 8, 2015 at 4:05
Hi Chris, if you feel your question has been answered, please don't forget to mark some answers as "helpful" using the arrows, and one of them as "accepted" by clicking the gray checkmark to the left of the answer. If your question hasn't been fully answered, please elaborate so we can further help! Thanks! — Maximillian Laumeister
– Maximillian Laumeister, Commented Sep 11, 2015 at 19:05

score 1 · Accepted Answer · 2015-09-08 04:22:36Z

1

In ES6, use a Set.

ES6 sets are "bags" of things which are there or not. Unlike an array, which you have to iterate over to find something, with sets, you can just add and delete items directly. They are pre-indexed by their contents, as it were.

// constructor
function box_brick( attribute1, attribute2, etc )
{
    ...
    box_brick.instances.add(this);
                        ^^^^^^^^^      // add to set
}

// initialize set
box_brick.instances = new Set();

// create a new instance
box_brick_instance = new box_brick(...);

// remove it from the set
box_brick.instances.delete(box_brick_instance);
                    ^^^^^^^^^^^^^^^^^^^^^^^^^^    // delete from set

edited Sep 8, 2015 at 4:22

answered Sep 8, 2015 at 4:02

user663031

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

Comments

Maximillian Laumeister · Accepted Answer · 2015-09-08 01:40:23Z

Since arrays are not indexed in any specific way, the only way to do this will be by iterating through to find the brick you want. I might recommend changing your data structure to be an object instead of an array, but following is a solution to get what you have working.

Below is a deleteID function that will iterate through and delete an an element with a specific id. In the following example, we remove the brick with id of "brick_2".

Live Demo:

var bricks = [];
bricks.push({box_id: "brick_1"});
bricks.push({box_id: "brick_2"});
bricks.push({box_id: "brick_3"});

function deleteID(id) {
    for (brick in bricks) {
        if (bricks[brick].box_id === id) bricks.splice(brick, 1);
    }
}

deleteID("brick_2");
document.getElementById("output").textContent = JSON.stringify(bricks);

<div id="output"></div>

JSFiddle Version: https://jsfiddle.net/fef3o6vv/

Data · Accepted Answer · 2015-09-08 01:44:19Z

0

You're using an array, so you can do either delete box_brick.instances[0] or box_brick.instances.splice(position, 1).

However, because you're using an array, you'd have to use indexof() to find the array index of the box_ID to be able to delete the instance.

Let's try using an object instead, with its scope outside of the function constructor:

// use a dictionary object to hold references to your objects:
var boxes = Object.create(null);

function box_brick(attribute1, attribute2, etc ) {

    this.attribute_1 = attribute1;
    this.attribute_2 = attribute2;
    this.attribute_etc = etc;

    var id = $.now().toString(); // use jQuery to create a unique ID from the UTC timestamp
    boxes[id] = this; // easier to use a unique id to augment object
}

Now it's easy to remove box instances:

function deleteBox(id) {
    if (boxes[id]) delete boxes[id];
}

edited Sep 8, 2015 at 1:44

answered Sep 8, 2015 at 1:35

Data

1,3671 gold badge11 silver badges19 bronze badges

6 Comments

user663031 Over a year ago

Is there some particular reason +new Date() would not work and you recommend using jQuery? Also, you don't need to check for membership before deleting.

zerkms Over a year ago

Time is not unique enought. It's not a problem to get the same time for 2 different function calls.

zerkms Over a year ago

@torazaburo you don't need to check it.

user663031 Over a year ago

@zerkms According to jQuery docs, "The $.now() method is a shorthand for the number returned by the expression (new Date).getTime().", so it's exactly the same.

user663031 Over a year ago

I'm also confused by how the user is ever supposed to know which ID to call deleteBox with, since it's never exposed to the outside world...

|

Chris · Accepted Answer · 2015-09-12 19:58:14Z

0

Thank you all for the assistance -- I've found that the .splice() function, suggested by elclanrs and Data, did exactly what I was hoping for. I'm using the following code and it works great:

for ( var i = 0; i < box_brick.instances.length; i++ )
{

    if ( box_brick.instances[i].box_id == box_to_delete )
    {
        box_brick.instances.splice(i, 1);
    }

}

Although this doesn't remove the standalone var / Object of a box (so in the console, I can still type brick_55.attribute and get a value), I've decided to just allow those variables to stay in memory, and use box_brick.instances as my sort of "master list" of all the actual boxes that are relevant to the application, disregarding the standalone var versions (which contain the same redundant information).

Thank you all so much! I sunk many, many hours into this before turning to StackOverflow, and your guys' guidance was just what I needed.

answered Sep 12, 2015 at 19:58

Chris

492 silver badges7 bronze badges

1 Comment

Maximillian Laumeister Over a year ago

I'm very glad you ended up getting this resolved, but I can't help but note that this answer is almost exactly the same as the answer I posted a week ago...

Collectives™ on Stack Overflow

Deleting an instance of a JavaScript Object

4 Answers 4

Comments

Comments

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related