如何使用javascript过滤列表然后从中删除结果答案

【问题标题】：How to filter a list and then remove the results from it, using javascript如何使用javascript过滤列表然后从中删除结果
【发布时间】：2017-11-23 01:31:21
【问题描述】：

我有一个要过滤的列表，然后删除过滤后的结果。我在 w3schools 中找到了一个现成的过滤解决方案，但我在删除行时遇到了问题。

我的 html 在这里：

<body>
    <ul id="project-list">
        <li><a href="#">Please please me</a></li>
        <li><a href="#">With the Beatles</a></li>
        <li><a href="#">A Hard Day's Night</a></li>
        <li><a href="#">Beatles for Sale</a></li>
        <li><a href="#">Help!</a></li>
        <li><a href="#">Rubber Soul</a></li>
        <li><a href="#">Revolver</a></li>
        <li><a href="#">Sgt. Pepper's Lonely Hearts Club Band</a></li>
        <li><a href="#">The Beatles (The White Album)</a></li>
        <li><a href="#">Yellow Submarine</a></li>
        <li><a href="#">Abbey Road</a></li>
        <li><a href="#">Let It Be</a></li>
    </ul>

    <div data-role="footer" class="ui-grid-a" data-position="fixed">

        <div id="myNavbar" data-role="navbar" class="navbar">
            <div class="ui-block-a" style="width:auto">
                <button id="remove" onclick="listDelete">Remove</button>
            </div>

            <script>
            $("button").click(function () {
                $("li").remove(":contains('Beatles')");
            });
            </script>

            <div class="ui-block-b" style="width:70%">
                <input type="text" id="search-input" onkeyup="listFilter()" placeholder="Filter list...">
            </div>
        </div>
    </div><!--/footer-->

过滤功能是这样的

function listFilter() {
// Declare variables
var input, filter, ul, li, a, i;
input = document.getElementById('search-input');
filter = input.value.toUpperCase();
ul = document.getElementById("project-list");
li = ul.getElementsByTagName('li');

for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
        li[i].style.display = "";
    } else {
        li[i].style.display = "none";
    }
}
}

上面的代码使按钮删除包含单词“Beatles”的每一行。我正在尝试删除包含进入 search-input 的任何内容的行，最好不区分大小写（就像过滤一样）。理想情况下，当过滤器文本框为空时，我希望它不起作用，以便意外单击删除按钮不会删除整个列表。

我正在使用 jquery-2.1.1 和 jqm-1.4.4

【问题讨论】：

标签： javascript jquery jquery-mobile

【解决方案1】：

希望这对你有用。将点击事件更改为此。它仍然区分大小写：

        $("button").click(function () {
            var fltr = $("#search-input").val();
            if (fltr)
                $("li").remove(":contains('" + fltr+ "')");
        });

【讨论】：

这行得通，但正如你所说，它区分大小写。我将尝试使其不区分大小写，将其放入 js 文件中，然后将其加载到标题中。我会回来的。

【解决方案2】：

基于diabolic's answer 和Highway Of Life 的icontains expression，不区分大小写的方法如下：

将以下两个加载到您的标题中，在一两个单独的文件中：

function listDelete(){
    $("button").click(function () {
        var input = $("#search-input").val();
            if (input) $("li").remove(":icontains('" +input+ "')");
    });
}

// non-case sensitive contains expression
jQuery.expr[':'].icontains = function(a, i, m) {
    return jQuery(a).text().toUpperCase()
    .indexOf(m[3].toUpperCase()) >= 0;
};

那么你的按钮应该是这样的：

<button id="remove" onclick="listDelete()">Remove</button>

【讨论】：