Ember element/component removal behaves unexpectedly

Basically Im trying to add visualilzation to a delete action.

And the code im using:

    {{#each wrappedRecords as |record|}}
        {{#fade-element}}
                {{record.name}}
                <span class="remove" {{action "removeRecord" record}}></span>
            </span>
        {{/fade-element}}
    {{/each}}

So the removeRecord action is being triggered and a record is removed from wrappedRecords

And now in my fade-element component wrapper. I catch component destroy in willDestroyElement hook.

export default Ember.Component.extend({
       willDestroyElement : function () {
            var clone = this.$().clone();
            clone.insertAfter(this.$());
            clone.fadeOut();
        },
});

And it does not work however when i replace:

clone.insertAfter(this.$()); with clone.insertAfter(this.$().parent());

It does work but then a new problem comes up. E.g:

I have 2 items and i try to remove the first it would look like this

X1 (to delete) X2 (second element) X1 (Clone that was appeneded to parent)