Q:

Highcharts - series.remove(); 4 series in chart, only 2 removed

Live example:

http://jsfiddle.net/jlbriggs/6dgs4cav/

I have a set up where I have a chart with four series.
I want to allow the user to select a different data set, and then 

remove the existing series
add the new series

I am stuck at the 'remove' phase, however, because after the first two series are removed, it tells me the next 2 are undefined.
The function to remove the series:
function updateData(chart, dataSet) {
    console.log(chart);
    $.each(chart.series, function(i,ser) {
        if(typeof(ser) != 'undefined') {
            console.log(ser);
            ser.remove();
        }
    });
}

Which leaves 2 series still on the chart.
When I console.log the chart object, it only lists two series.  
The questions:

Am I doing this wrong? Is there a better way to remove all of the series?
Why does the chart only show two series instead of four?

A:

Looks like your code is modifying the array that is being iterated over. Try this and observe the logs.
$.each(chart.series, function(i,ser) {        
        console.log(i + " / " + chart.series.length);
        ser.remove();        
});

Observe how the current index i is increasing and your series length is decreasing after each iteration.
0 / 4
1 / 3
2 / 2 << chart.series[2] becomes undefined for chart.series.length=2

At the third iteration, i=2 & chart.series.length=2 => ser=undefined
Proper way to remove all series data from a highcharts chart? provides the right way of doing this. Always remove the series at index 0 if it exists.
while(chart.series.length > 0)
    chart.series[0].remove(true);

