Move div rather than Remove()

Question

        $(settings.widgetSelector, $(settings.columns)).each(function () {
        var thisWidgetSettings = iNettuts.getWidgetSettings(this.id);
        if (thisWidgetSettings.removable) {
            $('<a href="#" class="remove">CLOSE</a>').mousedown(function (e) {
                /* STOP event bubbling */
                e.stopPropagation();    
            }).click(function () {
                if(confirm('This widget will be removed, ok?')) {
                    $(this).parents(settings.widgetSelector).animate({
                        opacity: 0    
                    },function () {
                        $(this).wrap('<div/>').parent().slideUp(function () {
                            $(this).remove();
                            iNettuts.savePreferences();
                        });
                    });
                }
                return false;
            }).appendTo($(settings.handleSelector, this));
        }

Basically right now this code when 'close' is clicked it removes the content completely. What i would rather do is move it to a different div. I was reading about prependTo. I thought this would be as simple as changing:

$(this).remove();

To:

$(this).prependTo('.dock');

But doesn't seem to be that simple. This just removes it still. Full Code

Answer 1

This will preserve the original element:

$('yourElement').clone().appendTo('whereverYouWant');

jsBin demo

---

If you want to remove it from it's original place:

$('yourElement').appendTo('whereverYouWant');

jsBin demo

Same as:

$('yourElement').remove().clone().appendTo('whereverYouWant');

Answer 2

Try jQuery detach, because remove also removes all element's references.

    $(settings.widgetSelector, $(settings.columns)).each(function () {
    var thisWidgetSettings = iNettuts.getWidgetSettings(this.id);
    if (thisWidgetSettings.removable) {
        $('<a href="#" class="remove">CLOSE</a>').mousedown(function (e) {
            /* STOP event bubbling */
            e.stopPropagation();    
        }).click(function () {
            if(confirm('This widget will be removed, ok?')) {
                $(this).parents(settings.widgetSelector).animate({
                    opacity: 0    
                },function () {
                    $(this).wrap('<div/>').parent().slideUp(function () {
                        $(this).detach().prependTo('.dock');
                        iNettuts.savePreferences();
                    });
                });
            }
            return false;
        }).appendTo($(settings.handleSelector, this));
    }