Remove Elements with Key Functions

<!DOCTYPE html>
<html lang="en"> 
<head>
 
<meta charset="utf-8">
<title>Title Here</title>
<script type="text/javascript" src="../d3.v3/d3.v3.js"></script>

var xAxis = d3.svg.axis()
				.scale(xScale)
				.orient("bottom");
var yAxis = d3.svg.axis()
				.scale(yScale)
				.orient("left");

svg.append("g")
			.attr("class","x axis")
			.attr("transform","translate("+padding+","+(h-padding)+")")
			.call(xAxis);
svg.append("g")
			.attr("class","y axis")
			.attr("transform", "translate("+padding+","+-10+")")
			.call(yAxis);

svg.selectAll("rect")
		.data(dataset,key)
		.enter()
	.append("rect")
	.attr("y",function(d,i){
		return yScale(d.value)-padding-5;
	})
	.attr("x",function(d,i){
		return xScale(i)+padding;
	})
	.attr("height",function(d,i){
		return h-yScale(d.value);
	})
	.attr("width",xScale.rangeBand())
	.attr("fill",function(d){
		return cVal(d.value);
	});
	
	
	yRange = Math.random()*1000;
	svg.selectAll("rect")
	.on("click",function(){
		for(var k=0;k<dataset.length;k++){
			dataset[k].value=Math.floor(Math.random()*yRange);
		}
	
	dataset.shift();

yScale = d3.scale.linear()
							.domain([0,d3.max(dataset,function(d){
								return d.value;
								})])
							.range([h-padding,padding]);
	xScale = d3.scale.ordinal()
								.domain(d3.range(dataset.length)).rangeRoundBands([0,w-padding],0.05);

var bars  = svg.selectAll("rect")
		.data(dataset,key); //you bind here by rule of function "key"
		
		bars.exit()
		.transition()
		.duration(1000)
		.style("opacity",0)
		.attr("x",-xScale.rangeBand()) //tell it in which direction to exit
		.remove();

xAxis = d3.svg.axis()
				.scale(xScale)
				.orient("bottom");
 
		yAxis = d3.svg.axis()
				.scale(yScale)
				.orient("left");  //orientation for labels
 
		
		svg.select(".x.axis")
						.transition()
						.duration(1000)
						.call(xAxis);
		svg.select(".y.axis")
						.transition()
						.duration(1000)
						.call(yAxis);
		
		bars.transition()
		.duration(1000)
		.delay(function(d,i){
			return i*50;
		})
		.attr("y",function(d){
			return yScale(d.value)-padding-5;
		})
		.attr("fill",function(d){
			return "rgb("+d.value*2+",0,0)";
		})
		.attr("height",function(d){
			return h-yScale(d.value);
		})
		.attr("x",function(d,i){
			return xScale(i)+padding;
		})
		.attr("width",xScale.rangeBand());

});

</script>
</body>
</html>