Move component from one container to another

[halogen]

foo = Ext.create('Ext.Container', {
    id: 'foo'
});
bar = Ext.create('Ext.Container', {
    id: 'bar'
});
baz = Ext.create('Ext.Carousel', {
    id: 'baz',
    defaults: {
        xtype: 'container'
    },
    items: [
        {
            html: 'the first thing'
        },
        {
            html: 'the second thing'
        }
    ]
});


Ext.Viewport.add(foo);
Ext.Viewport.add(bar);
foo.add(baz);
foo.remove(baz);
Ext.Viewport.remove(foo);
bar.add(baz);

Why does this raise "Uncaught Error: NOT_FOUND_ERR: DOM Exception 8" in Default.js on line 417? If this is the wrong way to move a component from one container to another, then what is the right way?

EDIT: I learned that it raises the exception because Ext.Component.remove(x) destroys x (Ext.Component.remove(x, false) prevents that). However, when I prevent baz from being destroyed (and even when I don't add foo to the viewport), bar just appears blank.

[jerome76]

That error comes up a lot for me when removing and re-adding components. I haven't really gotten down to the bottom of it. I think it has something to do with child elements not being properly placed within the parent elements when being added, but I'm not totally sure.

If anyone has insight on this, I'd also like to know.