D3.js - Animated exit for nested object

For each data item, I add a group (g class="parent") with a circle in it. Adding them and setting their properties works fine.

But I can't figure out how to handle removal. What's the way to animate a nested object on exit?

// parents
var parents = svg.selectAll("parent").data(glyphs);
parents.enter()
    .append("g")
    .attr("class", "parent")
    .attr("transform", function (glyph) { 
        return "translate(" + glyph.x + "," + glyph.y + ")";
    });

// children
var circles = parents.append("circle");
circles
    .attr("r", 0)
    .attr("fill", function (glyph) { return glyph.color; });
// animated entry
circles.transition()
    .attr("r", function (glyph) { return glyph.radius; });

Here's the part that isn't working. I'm not sure how to animate the children on exit.

// animate exit
circles
    .exit() // <-- not valid
    .transition()
    .duration(250)
    .attr("r", 0);
parents
    .exit()
    .transition()
    .delay(250)
    .remove();

Could anyone offer some tips or point me to a good example?