我有一个正在尝试过滤的列表,然后删除过滤的结果。我在 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”的每一行。我正在尝试删除包含搜索输入内容的行,最好不区分大小写(就像过滤一样)。理想情况下,我希望当过滤器文本框为空时此功能不起作用,这样意外单击删除按钮就不会删除整个列表。
我正在使用jquery-2.1.1和jqm-1.4.4
最佳答案
希望这对您有用。将点击事件更改为此。它仍然区分大小写:
$("button").click(function () {
var fltr = $("#search-input").val();
if (fltr)
$("li").remove(":contains('" + fltr+ "')");
});
关于javascript - 如何使用 javascript 过滤列表,然后从中删除结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47446287/