4

多くのdivがネストされたWebページがあります。特定のIDを持つ1とその子を除くすべての要素を削除するにはどうすればよいですか。

そのdivとその子を保持し、親も含めて他のすべてを削除したい

次のコードは機能せず、子も削除されます

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

jQuery以外のソリューションが欲しいのですが。

4

2 に答える 2

3

ノードへの参照を保存し、すべてを削除してから、ノードを本体に配置できます。

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

デモンストレーション

于 2013-03-08T20:54:20.047 に答える
1

dystroyによって提供されるアプローチとは少し異なるアプローチで、保持する要素を次のように移動し、他のすべての子を削除する親の最初の子として配置します（body親が提供されていない場合はデフォルトで要素になります） ）、代替の「すべてを削除してから元に戻す」アプローチとは対照的です。移動に続いて、これはその親から後続のすべての子ノードを削除します（これには、特定の要素を取得するためのかなり醜い関数が含まれますが、その機能のないブラウザーの不足を補う試みはありませんdocument.querySelector()））：

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フィドルデモ。

これは、CSSセレクター文字列を使用して、上記のように、または次のように呼び出すことができます。

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

JSフィドルデモ。

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

JSフィドルデモ。

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

JSフィドルデモ。

同様のセレクターを使用して、親を識別することもできます。

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

JSフィドルデモ。

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

JSフィドルデモ。

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

JSフィドルデモ。

参照：

于 2013-03-08T21:41:24.660 に答える