How can I parse a document and remove all elements except for one that matches and ID and its children

Question

I have a webpage with many divs nested. How can I strip away all elements except 1 that has a certain ID and its children.

I want to keep that div and its children and remove everything else even its parents

The following code doesn't work it deletes the children as well

var elms = document.getElementsByTagName('*');
for (var i = 0; i < elms.length; i++) {
    if (elms[i].id != "div63") {
        elms[i].parentNode.removeChild(elms[i])
    }
};

I would like a non-jQuery solution.

Answer 1

A slightly alternative approach to that provided by dystroy, in that the following moves the element you wish to keep, placing it as the first child of the parent from which you want to remove all other children (defaulting to the body element if no parent is provided), as opposed to the alternate 'remove everything and then put it back' approach. Following the move, this then removes all subsequent child-nodes from that parent (this includes a rather ugly function to retrieve a given element, albeit with no attempt made to compensate for the lack of document.querySelector() in browsers without that feature)):

function retrieveElem(ref) {
    if (!ref) {
        return document.body;
    } else {
        if (typeof ref === 'string') {
            if (document.querySelector) {
                var dQSresult = document.querySelector(ref);
                if (dQSresult) {
                    return dQSresult;
                } else {
                    return document.querySelector('#' + ref);
                }
            }
        } else {
            switch (ref.nodeType) {
                case 1:
                    // it's an element
                    return ref;
                case 9:
                    // it's the document node
                    return document.body;
            }
        }
    }
}

function clearAllExcept(el, from) {
    el = retrieveElem(el);
    from = retrieveElem(from);
    from.insertBefore(el, from.firstChild);
    while (from.firstChild.nextSibling) {
        from.removeChild(from.firstChild.nextSibling);
    }
}

clearAllExcept('#id63','.aChild');

JS Fiddle demo.

This can be called as above, using CSS selector strings, or as follows:

// with a CSS selector to identify the `id` of the child
clearAllExcept('#id63');

JS Fiddle demo.

// with a string to identify the `id` of the child
clearAllExcept('id63');

JS Fiddle demo.

// with a node-reference to the child:
clearAllExcept(document.getElementById('id63'));

JS Fiddle demo.

Similar selectors can be used to identify the parent, also:

// using the `document`:
clearAllExcept('#id63', document);

JS Fiddle demo.

// with a string to identify the `id` of the parent
clearAllExcept('#id63','#test');

JS Fiddle demo.

// with a node-reference to the parent:
clearAllExcept('#id63', document.getElementById('test'));

JS Fiddle demo.

References:

• document.querySelector().
• Node.firstChild.
• Node.insertBefore.
• Node.nextSibling.
• Node.nodeType.
• switch ().

Answer 2

You can save a reference to your node, remove all, and then put your node in the body :

var saved = document.getElementById('div63');
var elms = document.body.childNodes;
while (elms.length) document.body.removeChild(elms[0]);
document.body.appendChild(saved);

Demonstration