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

Answer 1

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

Answer 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.

Answer 3

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

Answer 4

you may call the form reset function instead.

remove the style attribute for the example element!

Answer 5

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 .

Answer 6

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