How can I use D3.js to animate a child element and then remove the parent element at the end of the animation?
- Is there a way to know when the transition on the child element has finished?
In jQuery, you would do $(this).parent().remove(); to remove the parent element. How would I achieve this in D3 syntax?
li.enter() .append('li') .append('i') .text(function (d) { return d; });
li.exit() .selectAll('i') .transition() .style('opacity', 0) .remove(); // Need to remove parent element here...
Check out the demo: http://jsbin.com/elaxom/1/edit