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。如果与userinput匹配，则变量标志设置为true，匹配元素的名称将被推送到matches []数组中。

然后，如果flag变量设置为true，我希望脚本删除overzicht_container中的每个元素（单词＆＃34; overzicht＆＃34;表示＆＃34;概述＆＃34;在荷兰语中，抱歉）除了匹配的元素外。

这最后一点让我很烦恼。我似乎无法让它工作：我试图过滤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>。

Answer 2

你正在努力做到这一点。清空所有孩子并将你想要的孩子放回去：

var matched = match; //the matched node if found
var node = document.getElementById("foo");
while (node.firstChild) {
    node.removeChild(node.firstChild);
}
node.appendChild(matched);

Javascript：删除除div之外的div中的所有元素

2 个答案: