MooTools: takeOut and putBack methods

Sometimes you don’t want to replace an element with another one, you just want a placeholder, so you can put it back later. I wrote takeOut and putBack to help out with that.

Element.implement({

    takeOut: function(elementType) {
        var elementType = ($type(elementType) == "string" ?
                           elementType: "span");

        this.placeholder = ($defined(this.placeholder) ?
                            this.placeholder : new Element(elementType).setStyle("display", "none").addClass("takenOut_"+this.get("id")));

        this.placeholder.inject(this, "before");
        return this.dispose();
    },

    putBack: function() {
        if ( !$defined(this.placeholder) ) {return false;}
        this.inject(this.placeholder, "after");
        this.placeholder = this.placeholder.dispose();
    }
});

As you can see, I have the two methods. takeOut has an optional argument, elementType. You can specify a different tag-name (of an element) to be the placeholder of the original element after you take it out. It’s quite handy when you normally take out div tags but need to work on a tr of a table which don’t allow child span tags. A class is also added on too the placeholder just so you can see what it is supposed to be.

putBack isn’t so exciting, it just replaces the span with the original element. No big deal.
But take a look at the value of this, it’s not simply hiding an element, it’s completely removing it and still knowing where to put it if you need too.