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

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

javascript jquery jquery-mobile

如何使用javascript筛选列表，然后从中删除结果,javascript,jquery,jquery-mobile,Javascript,Jquery,Jquery Mobile,我有一个要筛选的列表，然后删除筛选的结果。我在W3学校找到了一个现成的过滤解决方案，但在删除行时遇到了麻烦我的html在这里： <body> <ul id="project-list"> <li><a href="#">Please please me</a></li> <li><a href="#">With the Beatles</a><

我有一个要筛选的列表，然后删除筛选的结果。我在W3学校找到了一个现成的过滤解决方案，但在删除行时遇到了麻烦

我的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-->
















去除
$（“按钮”）。单击（函数（）{
$（“li”）。删除（“：contains（‘披头士’”）；
});

过滤功能如下所示

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";
    }
}
}

函数listFilter（）{
//声明变量
var输入、滤波器、ul、li、a、i；
输入=document.getElementById（'search-input'）；
filter=input.value.toUpperCase（）；
ul=document.getElementById（“项目列表”）；
li=ul.getElementsByTagName（'li'）；
对于（i=0；i-1）{
李[i].style.display=“”；
}否则{
li[i].style.display=“无”；
}
}
}

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

我正在使用jquery-2.1.1和jqm-1.4.4，希望这对您有用。将单击事件更改为此。它仍然区分大小写：

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

基于Life's和Highway's，实现这一点的非区分大小写方式如下：

在标题中的一个或两个单独的文件中加载以下两个文件：

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

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

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

删除

这是可行的，但正如您所说，它区分大小写。我将尝试使其不区分大小写，将其放在js文件中，并将其加载到标头上。我会回来的。

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