Use JavaScript to add/remove elements from a delimited list

In my APEX application I have a page item that stores a colon delimited list of items, and I want to use JavaScript to add or remove elements from that list.

P1_LIST =”Black:Red:Gold:Blue:White”

Adding An Element

To add an element to the list with JavaScript you could  simple concatenate a color preceded by a colon:
newColor = ‘Green’
$s(‘P1_LIST’, $v(‘P1_LIST’) + ‘:’ + newColor);

This is problematic, if P1_LIST were empty. Then you could end up with:
P1_LIST = “:Green”

To avoid this you can first split the list into an array, “push” the new color to the array, and then write it back as a delimited list:

[sourcecode language=”javascript”]newColor = ‘Green’;
arr = $v(‘P1_LIST’).split(‘:’);
arr.push(newColor);
$s(‘P1_LIST’, arr.join(‘:’));[/sourcecode]

Removing an Element:

To remove a color from our list is a little trickier. But working with arrays helps. Let’s say we want to remove Blue. We’ll pull the delimited list back into an array (arr). We’ll find the array index of Blue, then loop through arr and push all elements except Blue into a new array (arr2). Lastly we’ll write the new array back to the page item:

[sourcecode language=”javascript”]
arr = $v(‘P1_LIST’).split(‘:’); //change list into an array
arr.splice(arr.indexOf(‘Blue’),1); //remove the color blue
$s(‘P1_LIST’, arr.join(‘:’)); //write array back to list[/sourcecode]

Thanks to Sentinel for the simplified version using splice();