Javascript:删除div中除一个元素之外的所有元素

Question

晚上好!

我有一个 HTML 文档，其中容器 div 中包含许多代表电影标题的元素。我有一个输入框，用户可以在其中搜索电影标题，如果有匹配项，我想完全清空包含元素的容器 div，除了匹配的电影标题。到目前为止，我一直在尝试这样做:

function Search() {
    var userinput = document.getElementById("userinput").value.toLowerCase();
    if (!userinput.replace(/\s+/g, '')) {
        alert('You havent entered any search words.');
        return;
    }

    userinput = userinput.toLowerCase();
    var list = document.getElementsByTagName("h3");
    var i = list.length,
        html, flag = false,
        matches = [];

    while (i--) {
        var html = list[i].innerHTML.toLowerCase();
        if (-1 < html.indexOf(userinput)) {
            flag = true;
            matches.push(list[i]);
            list[i].className = "matched";
        }
    }

    if (!flag) //geen match
    {
        if (-1 !== html.indexOf(userinput))
            alert('No match found !');
    } else {
        for (var i = 0; i < matches.length; i++) {
            matches[i].style.backgroundColor = "#ff6d6d";
            $("#overzicht_list").children().filter(function() {
                return $(this).text().indexOf(matches[i]) < -1;
            }).remove();
        }
    }

完整影片的 HTML 示例:

<div class="overzicht-wrap" id="overzicht-wrap">
            <div class="container module">
                <ul class="overzicht_list" id="overzicht_list">
                    <li class="overzicht_list_item">
                        <div class="item_info">
                            <img class="item_cover" src="images/covers/as_above_so_below.jpg" alt="As Above, So Below cover">

                            <a href="#" class="button-inactive">Draait niet meer</a>
                        </div>
                        <!-- end item_info -->

                        <div class="item_content">
                        <h3>as above, so below</h3>
                            <p>
                                Onder de straten van Parijs liggen kilometers aan gangenstelsels, de eeuwige thuishaven van talloze zielen. Wanneer een team van ontdekkingsreizigers het doolhof van botten verkent, ontdekt men het duistere geheim dat binnen deze stad van de doden ligt verscholen...
                            </p>

                            <a href="details/as_above_so_below.html">Lees meer</a>   <a onclick="SetFavorites()"><i class="fi-star" id="star"></i></a>

                            <ul class="ratings">
                                <li><img src="images/ratings/16.png" alt="16"></li>
                                <li><img src="images/ratings/angst.png" alt="16"></li>
                                <li><img src="images/ratings/geweld.png" alt="16"></li>
                                <li><img src="images/ratings/grof_taalgebruik.png" alt="16"></li>
                            </ul>
                        </div>
                    </li>
                    <!-- end overzicht_list_item. Do note that the divs above are closed elsewhere -->

如您所见，我首先进行一些简单的输入验证，以查看用户是否实际输入了任何内容。他们，我声明了一堆变量供以后使用。

然后，我循环遍历包含所有元素的 List Var。如果与用户输入匹配，则变量标志将设置为 true，并且匹配元素的名称将被推送到 matches[] 数组中。

然后，如果标志变量设置为 true，我希望脚本删除 overzicht_container 中的每个元素(“overzicht”这个词在荷兰语中的意思是“概述”，抱歉)，除了匹配的元素。

最后一点让我感到困扰。我似乎无法让它工作:我尝试过滤 Remove() 事件，如您所见，但没有任何内容被删除。

有人可以帮助我吗？

谢谢!

Answer 1

还有一个版本。注意:我没有删除元素，而是隐藏了它们。即使在 <input> 中输入其他单词后，它也可以显示相关结果。 .

Fiddle .

HTML:

<input type="text" title="Zoekbalk" id="userinput" placeholder="Typ hier om te zoeken" class="input_box" />
<ul class="overzicht_list" id="overzicht_list">
    <h3>first</h3>
    <h3>second</h3>
    <h3>third</h3>
    <h3>four</h3>
    <h3>five</h3>
    <h3>six</h3>
</ul>

CSS:

.matched
{
    background-color: #ff6d6d
}

JS:

$(document).ready(function()
{
    $('#userinput').change(function()
    {
        var userinput = this.value.toLowerCase();
        var allElements = $('#overzicht_list h3');
        if (!userinput.replace(/\s+/g, ''))
        {
            alert("You haven't entered any search words.");
            allElements.removeClass("matched").show();
            return;
        }
        allElements.removeClass("matched").hide();
        allElements.filter(function()
        {
            var text = this.textContent.toLowerCase();
            return (text.indexOf(userinput) > -1);
        }).addClass("matched").show();
    });
});

更新。 Updated fiddle用于隐藏所有子项(不仅是 <h3> )并显示 <li>和<div> ，其中<h3>被包裹起来。