// *** USAGE *** //

window.addEvent('domready',function(){

    myStorehouse = new Storehouse();
        
    $('store_red').addEvent('click',function(){
        if(!myStorehouse.red){ // not stored
            this.set('text','inject red');
            
            // store it
            myStorehouse.store('red', 'div.red'); 
            
            // or use `myStorehouse.dispose('red', 'div.red')`
            // `store` and `dispose` are interchangable
            // elements now accessible by `myStorehouse.red`

        } else {
            this.set('text','dispose red');        
            
            myStorehouse.inject('red');
            // injects elements back where they belong
            
        }
    });
    
    // StoreHouse supports as many collections of elements as you want
    $('store_green').addEvent('click',function(){
        if(!myStorehouse.green){
            this.set('text','inject green');
            
            myStorehouse.dispose('green','div.green');
            // elements stored in myStorehouse.green
            
        } else {
            this.set('text','dispose green');
            myStorehouse.inject('green');
        }
        
    });
    
});

// *** THE CLASS *** //

var Storehouse = new Class({
    
    dispose: function(shelf, elements){
        this[shelf] = [];
        $$(elements).each(function(element){
            if(element.getPrevious()){
                element.store('previous',element.getPrevious());
            } else if(element.getNext()) {
                element.store('next',element.getNext());
            } else {
                element.store('parent',element.getParent());
            };
            this[shelf].include(element.dispose());
        }.bind(this));
        return this;
    },
    
    inject: function(shelf){
        this[shelf].reverse().each(function(element){
            var previous = element.retrieve('previous');
            var next = element.retrieve('next');
            var parent = element.retrieve('parent');
            if(previous){
                element.inject(previous,'after');
            } else if(next) {
                element.inject(next,'before');
            } else {
                element.inject(parent);
            }
        });
        delete this[shelf];
        return this;
    },
    
    store: function(shelf, elements){
        return this.dispose(shelf, elements);
    }

});

<h3>Should dispose the elements and inject them back into the DOM to their original positions</h3>

<p>
    <button id="store_red">dispose red</button>
</p>

<div class="container">
    <div class="red">1</div>
    <div class="red">2</div>
    <div>3</div>
    <div class="red">4</div>
    <div class="red">5</div>
    <div>6</div>    
</div>

<p style="clear:both; padding-top: 20px">
    <button id="store_green">dispose green</button>
</p>
<div class="container">
    <div>1</div>
    <div class="green">2</div>
    <div>3</div>
    <div class="green">4</div>
    <div>5</div>
    <div class="green">6</div>
</div>

MooShell