CODEWITHSUNDEEP
javascript
Rachel
Rachel

Reputation: 103607

How to remove a property from an object?

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 ?

Upvotes: 21

Views: 26182

Answers (3)

Tushar
Tushar

Reputation: 21

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

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1075765

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

Upvotes: 34

Russ Cam
Russ Cam

Reputation: 125538

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

Upvotes: 6

Related Questions