Remove an object from an array?

Question

I have this application that lets the user choose his color preferences and change them later when he decides to do so. The app doesn't need to work between page reloads. I want the user to be able to delete a specific color preference from a drop down list. I want to use indexOf and splice but I have struggled to long with it. Here is what I have got up to now. The trouble is in the Remove(). JS Bin: http://jsbin.com/ANENaRid/2/

Here is the trouble function:

function Remove() {
    var select = document.getElementById("selectColor");
    for (var i = 0; i < colors.length; i--) {
        var selectIndex = colors.indexOf(select.value);
        if (selectIndex !== -1) {
            colors.splice(i, 1);
        }
        return false;
    }
}

Zoltan.Tamasi · Accepted Answer · 2014-01-03 09:38:30Z

2

The remove function should look like this and you have to remove the option from the select too (only constructor functions names should be uppercase):

function remove() {
    var select = document.getElementById("selectColor");
    for (var i = 0; i < colors.length; i++) {
        if (colors[i].name_prop == select.value) {
            colors.splice(i, 1);
        }
     }
}

answered Jan 3, 2014 at 9:38

Zoltan.Tamasi

1,38913 silver badges27 bronze badges

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

9 Comments

Blazes Over a year ago

This is the correct way to find the selected color. However, once found, you can break from the loop. Though, note that it does not do what the author thinks it will. He's only modifying an array. The actual option needs to be removed. In fact, I'd dispense with the colors array and just manipulate options instead (e.g. with jquery).

user1636522 Over a year ago

You should break the loop.

Henry Lynx Over a year ago

@Zoltan, what do you meen to remove the option from select? This way my other function Place() doesn't work I guess they interfere badly when using the same input 'var select = document.getElementById("selectColor");'

Zoltan.Tamasi Over a year ago

If the user removes a color it must disappear from the dropdown I guess.

user1636522 Over a year ago

It depends on whether or not the data is already bound to the view. Please don't guess, give it an actual check.

|

Kristian Barrett · Accepted Answer · 2014-01-03 09:39:39Z

2

function Remove() {
    var select = document.getElementById("selectColor");
    var selectIndex = colors.indexOf(select.value);
    if (selectIndex !== -1) {
        colors.splice(selectIndex , 1);
    }
    return false;
}

Instead of iterating through the color array you should just select the color you want to remove. You get the index of that item and delete it. No need to iterate it.

answered Jan 3, 2014 at 9:39

Kristian Barrett

3,7924 gold badges28 silver badges44 bronze badges

Comments

jingyinggong · Accepted Answer · 2014-01-03 09:34:14Z

0

you may call the form reset function instead.

remove the style attribute for the example element!

answered Jan 3, 2014 at 9:34

jingyinggong

6465 silver badges9 bronze badges

Comments

Orifjon · Accepted Answer · 2014-01-03 09:39:01Z

0

use either

for(var i = 0; i < colors.length; i++) { 
    //your code here
}

or

for(var i = colors.length-1; i >= 0; i--) { 
    //your code here
}

on your loop

and take return statement to inside of if block

edited Jan 3, 2014 at 9:39

answered Jan 3, 2014 at 9:31

Orifjon

1,1079 silver badges25 bronze badges

1 Comment

user1636522 Over a year ago

var i = colors.length - 1; i >= 0; i--

Hüseyin BABAL · Accepted Answer · 2014-01-03 09:48:28Z

0

I have refactored you remove function;

function Remove () {
    var selectedIndex = document.getElementById("selectColor").selectedIndex;
  var options=document.getElementById("selectColor").options;
    for(var i = 0; i < options.length; i++) {
            if(options[selectedIndex].text === colors[i].name_prop){
              alert(colors[i].name_prop + "removed");
            colors.splice(i, 1);
               return false;
        }

     }
}

It removes selected item from colors array

answered Jan 3, 2014 at 9:48

Hüseyin BABAL

15.6k5 gold badges53 silver badges74 bronze badges

2 Comments

Zoltan.Tamasi Over a year ago

It is same as my answer but with added bugs. If you remove from the colors array but not from options, colors[i] can have value undefined, and you will get an exception when asking for name_prop of undefined.

Hüseyin BABAL Over a year ago

My code is not same as yours. I have developed the code so only it removes selected object from array. Selectbox population is not included in my code

Community · Accepted Answer · 2017-05-23 12:11:34Z

0

This might help a bit :

for (var i = 0; i < colors.length; i++) {
    var index = colors[i].name_prop.indexOf(select.value);
    if (index !== -1) {
        colors.splice(i, 1);
        return false;
    }
}

indexOf is probably useless and not reliable. I'm too lazy to investigate further though, see this answer for an alternate way : https://stackoverflow.com/a/20900571/1636522.

edited May 23, 2017 at 12:11

CommunityBot

11 silver badge

answered Jan 3, 2014 at 9:35

user1636522

2 Comments

Zoltan.Tamasi Over a year ago

Why do you use indexOf to check equality?

user1636522 Over a year ago

@Zoltan.Tamasi It's a dirty answer based on OP's code. I linked him to yours since I've assumed that you were almost doing it the right way.

Collectives™ on Stack Overflow

Remove an object from an array?

6 Answers 6

9 Comments

Comments

Comments

1 Comment

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

9 Comments

Comments

Comments

1 Comment

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related