jquery - 如何删除除一个元素之外的所有元素，并保持相同的 CSS 路径？

Question

我需要从页面中提取单个元素(及其所有内容)，但仍保持指向它的相同 CSS 树。

为了解释，假设我有以下 DOM:

<div>1
    <div>2</div>
    <div>3
        <div>4
            <div>5</div>
        </div>6
        <div>7
            <div>8
                <div>9</div>
            </div>
        </div>
        <div>10
            <div>
                <div>content</div>
            </div>
        </div>
    </div>
</div>

我只对包含 content 的元素感兴趣，即我需要将 DOM 转换为:

<div>
    <div></div>
    <div>
        <div></div>
        <div></div>
        <div>
            <div>
                <div>content</div>
            </div>
        </div>
    </div>
</div>

(content 的路径应该还是一样的)

我正在尝试类似 jsfiddle 的东西:

$("#want").siblings().html("");
$("#want").parents().siblings().html("");

这似乎还不够。

建议？

编辑:概括了示例，可以有任何元素而不是 div。

Answer 1

也许是这样的:

var classForKeepings = 'keepThisItem';
var $elem = $('#want'); // give start element
$elem.addClass(classForKeepings); // give a class to make it stay

while( $elem.parent().length!==0 ){ // while the element has a parent
    $elem = $elem.parent(); // shift $elem to the parent
    $elem.addClass(classForKeepings ); // and add a class to make it stay
}

$('#startElement *:not(.'+classForKeepings+')').remove(); // remove all elements not tagged with the class
$('.'+classForKeepings ).removeClass(classForKeepings); // Cleanup afterwards

我使用了删除，因为你不需要它们。如果您确实需要这些，您可以将其更改为 .html('')