使用 Cheerio/jQuery 删除所有元素，但通过结构保持选中状态答案

【问题标题】：Remove all elements but keep selected with structure using Cheerio/jQuery使用 Cheerio/jQuery 删除所有元素，但通过结构保持选中状态
【发布时间】：2020-01-27 17:14:23
【问题描述】：

我想指定我想保留哪些元素，但要使用它的结构。示例：

<html>
    <head>
        <meta xx>
    </head>
    <body>
        <div class="some1">
            <div class="some1-1"></div>
            <div class="some1-2"></div>
            <div class="some1-3"></div>
            <div class="some1-4"></div>
            <div class="some1-5"></div>
        </div>
        <div class="some2">
            <div class="some2-2">
                <div class="some2-2-1"></div>
                <div class="some2-2-2"></div>
            </div>
            <div class="some2-3"></div>
            <div class="some2-4"></div>
            <div class="some2-5"></div>
        </div>
    </body>
</html>

而我只需要保留，例如： .some2-2-1, .some-2-3, .some-1-3，通过删除所有其他元素，并保留它的父母，所以它将是：

<html>
    <head>
        <meta xx>
    </head>
    <body>
        <div class="some1">
            <div class="some1-3"></div>
        </div>
        <div class="some2">
            <div class="some2-2">
                <div class="some2-2-1"></div>
            </div>
            <div class="some2-3"></div>
        </div>
    </body>
</html>

我无法指定要删除哪些元素（它是动态的），但只能指定要保留的元素，如何完成？

$('*:not('.some2-2-1, .some-2-3, .some-1-3')').remove() 在这种情况下不起作用;)

【问题讨论】：

您的示例 HTML 有点不一致/令人困惑。为什么some1的后代以some1-2开头而不是some1-1开头？为什么没有some2-1？您还说您想保留some2-3-1，但在示例中找不到。

标签： javascript jquery node.js cheerio

【解决方案1】：

我确信会有几种方法可以做到这一点，但这里有一种方法（参见 cmets）：

$(function() {
    var elementsToKeep = [
        ".some2-2-1",
        ".some2-3",
        ".some1-3",
    ];

    // parent elements that are needed will be appended here
    var needed = [];

    for (var i = 0; i < elementsToKeep.length; i++) {
        // get the hierarchy, e.g. ".some2-2-1" -> "2-2-1"
        var hierarchyPos = elementsToKeep[i].replace(".some", "");

        // if we're keeping 2-2-1, we also need 2-2, and 2
        //
        // recursively remove the last two characters to get
        // the parent level until there's nothing left
        while (hierarchyPos !== "") {
            if (!needed.includes(hierarchyPos)) {
                needed.push(hierarchyPos);
            }

            hierarchyPos = hierarchyPos.slice(0, -2);
        }
    }

    // "needed" will now contain 2-2-1, 2-2, 2, etc.
    console.log("all required elements:", needed.join(", "));

    // iterate through each of the original selectors
    $(elementsToKeep.join(",")).each(function() {

        // check each of this element's siblings and remove
        // any whose class isn't included in the "needed" array
        var siblings = $(this).siblings();

        siblings.each(function(i, el) {
            var pos = el.className.replace("some", "");

            // if "pos" is 2-2-2 (for example), it won't appear in "needed",
            // so it's safe to remove
            if (!needed.includes(pos)) {
                $(el).remove();
            }
        })
    })

    // finished
    console.log("final output:");
    console.log($("#test").html());
})

<div id="test">
    <div class="some1">
        <div class="some1-1"></div>
        <div class="some1-2"></div>
        <div class="some1-3"></div>
        <div class="some1-4"></div>
        <div class="some1-5"></div>
    </div>
    <div class="some2">
        <div class="some2-2">
            <div class="some2-2-1"></div>
            <div class="some2-2-2"></div>
        </div>
        <div class="some2-3"></div>
        <div class="some2-4"></div>
        <div class="some2-5"></div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

【讨论】：