show/hide series vanishes styling of datalable - highcharts

Question

In my chart I am combining a class together with datalables of each series.
At some point I am hiding datalables of one series. But If now I show/hide any other series, the hided datalables appears.
I made a jsfiddle example. Do the following steps to see my meaning:
1. click on button 1 to hide datalables on series1
2. Hide series 2
Now the datalables on series 1 shows up. How can I stop this behavior?
jsfiddle link: http://jsfiddle.net/jmogexfj/2/
$(function () {
button1();
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
useHTML: true,
formatter: function () {
return '<div class="label_'+this.series._i+'">' + this.y + '</div>';
}
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
},
{
data: [10.9, 50.5, 60.4, 100.2, 104.0, 106.0, 120.6, 108.5, 106.4, 104.1, 90.6, 50.4]
}]
});
});
function button1(){
$("#b1").click(function(){
$(".label_0").toggle();
});
}

Answer 1

That's how Highcharts library works. When you update chart (like hiding by legend, resizing window browser etc.), elements are redrawn.
To hide dataLabels, use series.update():
$('#container').highcharts().series[0].update({
dataLabels: {
enabled: false
}
});
Demo: http://jsfiddle.net/jmogexfj/4/
If you really need to use classes, then use chart.events.redraw to show/hide dataLabel on each redraw: http://jsfiddle.net/jmogexfj/5/
Highcharts example:
chart: {
events: {
redraw: function () {
var showOrHide = display ? 'show' : 'hide';
$(".label_0")[showOrHide]();
}
}
},
Click button:
function button1() {
$("#b1").click(function () {
display = !display;
$(".label_0").toggle();
});
}