如何使用 javascript 筛选列表然后从中删除结果

Question

我有一个要过滤的列表，然后删除过滤后的结果。我在 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

Answer 1

希望这对您有用。把点击事件改成这个。仍然区分大小写：

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

Answer 2

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

在您的 header 中，在一个或两个单独的文件中加载以下两个文件：

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>

如何使用 javascript 筛选列表然后从中删除结果

How to filter a list and then remove the results from it, using javascript

javascript

jquery

jquery-mobile