How to remove a property from an object?

Question

Currently an event is set on checkboxes, and event.target gives me the status (checked = true/false) of checkbox which is clicked.

I am maintaining an object which keeps the track on all the selected checkboxes

var selectedMap  = {};

if(event.target == true){
    var key = event.target.id;
    var val = event.target.name;
    selectedMap[key] = val;
}

and I want to remove the element from the map which is unselected

else if(event.target == false){
  selectedMap.remove(event.target.id);
}

when I run this it gives me error in Firebug : selectedMap.remove is not a function

So my question is How can I remove the element when the checkbox is unselected ?

possible duplicate of How to remove a property from a javascript object — Thomas
– Thomas, Commented May 28, 2012 at 19:42

T.J. Crowder · Accepted Answer · 2010-11-14 15:33:23Z

34

Using delete:

delete selectedMap[event.target.id];

You're setting the value incorrectly, though. Here's the correct way:

if(event.target == true){
    var key = event.target.id;   // <== No quotes
    var val = event.target.name; // <== Here either
    selectedMap[key] = val;
}

In fact, you could:

if(event.target == true){
    selectedMap[event.target.id] = event.target.name;
}

Getting the event target stuff out of the way, it's easier to envision this with simple strings:

var obj = {};
obj.foo = "value of foo";
alert(obj.foo);    // alerts "value of foo" without the quotes
alert(obj["foo"]); // ALSO alerts "value of foo" without the quotes, dotted notation with a literal and bracketed notation with a string are equivalent
delete obj.foo;    // Deletes the `foo` property from the object entirely
delete obj["foo"]; // Also deletes the `foo` property from the object entirely
var x = "foo";
delete obj[x];     // ALSO deeltes the `foo` property

When using a plain object like this, I always use a prefix on my keys to avoid issues. (For instance, what would happen if your target element's ID was "toString"? The object already has an [inherited] property called "toString" and things would get Very Weird Very Quickly.)

So for me, I do this:

if(event.target == true){
    selectedMap["prefix" + event.target.id] = event.target.name;
}

...and of course:

delete selectedMap["prefix" + event.target.id];

edited Nov 14, 2010 at 15:33

answered Nov 14, 2010 at 15:27

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

6 Comments

Mrigesh Raj Shrestha Over a year ago

stackoverflow.com/questions/6485127/… just incase u want second thought on delete

T.J. Crowder Over a year ago

@MrigeshRajShrestha: Except that the accepted answer there is wrong.

Mrigesh Raj Shrestha Over a year ago

i pulled it easily with splice; dunno what happened there.. u got jsfiddle for the issue??

T.J. Crowder Over a year ago

@MrigeshRajShrestha: splice is for dealing with properties classed as array indexes (see §15.4 of the spec for which properties are classed that way). I don't know what you mean by "u got jsfiddle for the issue?". If you mean the error I pointed out in the accepted answer there, look again at my comment; there's a link to a jsbin post (jsbin is like jsfiddle) showing how it's wrong.

Mrigesh Raj Shrestha Over a year ago

@TJ Crowder jsfiddle.net is a web app that allows online storage and execution of your script. good in case you want your scripts debugged by others without sharing whole info.. check that site; its awesome

|

Russ Cam · Accepted Answer · 2010-11-14 15:29:19Z

6

What you have is an object and not an array (although an array is an object). You declare an object literal with {} whereas an array literal is declared with [].

You can use delete to remove an object property like so

delete selectedMap[event.target.id];

answered Nov 14, 2010 at 15:29

Russ Cam

126k34 gold badges211 silver badges275 bronze badges

Comments

Tushar · Accepted Answer · 2024-06-25 08:21:59Z

0

Initializes an empty object, selectedMap, and sets up event listeners on all checkboxes. When a checkbox is checked or unchecked, the code updates selectedMap by adding or removing entries based on the checkbox's id and name attributes.

var selectedMap = {};

document.querySelectorAll('input[type=checkbox]').forEach(function(checkbox) {
    checkbox.addEventListener('change', function(event) {
        var key = event.target.id;
        var val = event.target.name;

        if (event.target.checked) {
            selectedMap[key] = val;
        } else {
            delete selectedMap[key];
        }
    });
});

edited Jun 25, 2024 at 8:21

answered Jun 25, 2024 at 6:39

Tushar

213 bronze badges

2 Comments

mono Over a year ago

What does this add that other answers already didn't?

Tushar Jadav Over a year ago

Thank you for contributing to the Stack Overflow community. This may be a correct answer, but it’d be really useful to explain your code further so developers can understand your reasoning. This is especially useful for new developers who aren’t as familiar with the syntax or are struggling to understand the concepts. Would you kindly edit your answer to include additional details to benefit the community?

Collectives™ on Stack Overflow

How to remove a property from an object?

3 Answers 3

6 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related