Can't remove old chart by d3 svg exit - d3.js

Question

I have implement a bar chart to show statistic, but when I update the SVG with new data the old bar won't be remove.
Can someone help to clarify the problem.
I use updateStatisticData to update my chart.
var cwidth = 800, cheight = 900;
var margin = {top: 80, right: 10, bottom: 20, left: 150};
var dataset = {
"series": ["Fail","Pass"],
"colors": ["#e74c3c","#2ecc71"]
};
var width = cwidth - margin.left - margin.right,
height = cheight - margin.top - margin.bottom;
function getStatisticData() {
$(document).ready(function() {
$.get("/statistic-test-result", { "_": $.now() }, function(msg, status){
data = msg['result']; //[{"ip":"x.x.x.x", "pass": 3, "fail": 7, 'total':10}, {...}]
var yScale = d3.scale.ordinal().rangeRoundBands([0, height], .3);
var x = d3.scale.linear().range([0, width]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("top");
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
var svg = d3.select("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append('text')
.attr("transform", "translate(" + (width / 2) + ",-" + (margin.top / 2) + ")")
.style("text-anchor", "middle")
.text("Max test items")
yScale.domain(data.map(function(d) {
return d.ip;
}));
x.domain([0, 17]);
svg.append("g")
.attr("class", "x axis")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
// add legend
var legend = svg.append("g")
.attr("class", "legend")
legend.selectAll('text')
.data(dataset["colors"])
.enter()
.append("rect")
.attr("x", width-margin.right - 25 - margin.left)
.attr("y", function(d, i){ return -(margin.top / 2) - i * 20})
.attr("width", 10)
.attr("height", 10)
.style("fill", function(d) {
return d;
})
legend.selectAll('text')
.data(dataset["series"])
.enter()
.append("text")
.attr("x", width-margin.right - margin.left)
.attr("y", function(d, i){ return -(margin.top / 2) + 9 - i * 20})
.text(function(d){return d});
var bars = svg.selectAll(".bar")
.data(data);
bars.enter().append('g').attr("class", "bar");
bars.append("rect")
.attr({
'fill':'#e74c3c',
'width':function(d) {
return x(d.fail);
},
'height': function(d) {
return yScale.rangeBand();
},
'y': function(d) {
return yScale(d.ip);
}
});
bars.append('text')
.text(function(d) {
if (d.fail > 0)
return d.fail;
})
.attr({
'fill':'#000',
'y': function(d) {
return yScale(d.ip) + yScale.rangeBand()/2;
},
'x': function(d) {
return 5;
}
});
bars.append("rect")
.attr({
'fill':'#2ecc71',
'width':function(d) {
return x(d.pass);
},
'height': function(d) {
return yScale.rangeBand();
},
'y': function(d) {
return yScale(d.ip);
},
'x':function(d) { return x(d.fail);
}
});
bars.append('text')
.text(function(d) {
if (d.pass > 0)
return d.pass;
})
.attr({
'fill':'#000',
'y': function(d) {
return yScale(d.ip) + yScale.rangeBand()/2;
},
'x': function(d) {
return 5 + x(d.fail);
}
});
return true;
});
});
}
function updateStatisticData() {
$.get("/statistic-test-result", { "_": $.now() }, function(msg, status){
data = msg['result']; //[{"ip":"x.x.x.x", "pass": 3, "fail": 7, 'total':10}, {...}]
var yScale = d3.scale.ordinal().rangeRoundBands([0, height], .3);
var x = d3.scale.linear().range([0, width]);
var svg = d3.select("svg")
var xAxis = d3.svg.axis()
.scale(x)
.orient("top");
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
yScale.domain(data.map(function(d) {
return d.ip;
}));
x.domain([0, 17]);
svg.selectAll("g.y.axis")
.call(yAxis);
svg.selectAll("g.x.axis")
.call(xAxis);
var bars = svg.selectAll(".bar")
.data(data);
bars.exit().remove(); //remove old bars
bars.enter().append('g').attr("class", "bar");
bars.append("rect")
.attr({
'fill':'#e74c3c',
'width':function(d) {
return x(d.fail);
},
'height': function(d) {
return yScale.rangeBand();
},
'y': function(d) {
return yScale(d.ip);
}
});
bars.append('text')
.text(function(d) {
if (d.fail > 0)
return d.fail;
})
.attr({
'fill':'#000',
'y': function(d) {
return yScale(d.ip) + yScale.rangeBand()/2;
},
'x': function(d) {
return 5;
}
});
bars.append("rect")
.attr({
'fill':'#2ecc71',
'width':function(d) {
return x(d.pass);
},
'height': function(d) {
return yScale.rangeBand();
},
'y': function(d) {
return yScale(d.ip);
},
'x':function(d) { return x(d.fail);
}
});
bars.append('text')
.text(function(d) {
if (d.pass > 0)
return d.pass;
})
.attr({
'fill':'#000',
'y': function(d) {
return yScale(d.ip) + yScale.rangeBand()/2;
},
'x': function(d) {
return 5 + x(d.fail);
}
});
return true;
});
}