我有这个动态形成的div出现在已经存在的div中。
<div id="onlineList">
<div id="ajaxChat_u_109" name="username1" data-gender="8">whatever1</div>
<div id="ajaxChat_u_109" name="username2" data-gender="8">whatever2</div>
<div id="ajaxChat_u_109" name="username3" data-gender="8">whatever3</div>
<div id="ajaxChat_u_109" name="username4" data-gender="8">whatever4</div>
<div id="ajaxChat_u_109" name="username5" data-gender="8">whatever5</div>
<div id="ajaxChat_u_109" name="username6" data-gender="8">whatever6</div>
<div id="ajaxChat_u_109" name="username7" data-gender="8">whatever7</div>
</div>
我想要的是一个jquery函数，它删除不包含输入字段传递的字符串的div。
<input type="text" id="searchuser" value="" />
<input type="button" id="gosearchuser" value=">" />
我已经把Jfidle http://jsfiddle.net/38Ndw/1/放在一起，你可以看到jquery显然不能正常工作。
答案 0 :(得分：4)
使用.filter()：
$("#gosearchuser").on("click", function (event) {
$('#onlineList').children('div').filter(function(){
return $(this).attr('name').indexOf($('#searchuser').val()) !== -1;
}).remove();
});
由于ID一次又一次重复，您的html标记无效。
答案 1 :(得分：3)
此答案假定不区分大小写，部分匹配搜索name属性是必需的（现已通过评论确认）：
对于您的具体示例问题，我有点像slideUp()和slideDown()，因为他们正确移动剩余的元素并将它们留在原位，以便可以反复更改过滤器：
它使用filter函数，它基本上是一个回调，依次传递每个匹配的元素。如果函数返回true（包括）或false（要排除），则会更改结果列表。然后slideUp()（remove()）仅应用于生成的匹配项。
这个还包括你想要的不区分大小写的匹配。
$("#gosearchuser").on("click", function (event) {
var searchuser = $('#searchuser').val().toLowerCase();
$('#onlineList').children('div').slideDown().filter(function(){
return $(this).attr('name').toLowerCase().indexOf(searchuser) == -1;
}).slideUp();
});
这也稍微有点效率，因为它只搜索$('#searchuser')一次（对于每个匹配的元素，这比搜索相同的元素/值，一遍又一遍更好）。< / p>
以下旧版本
它使用过滤器函数，它基本上是一个回调，依次传递每个匹配的元素。如果它返回true（包括）或false（要排除），则会更改结果列表。然后remove()仅应用于结果匹配。
$("#gosearchuser").on("click", function (event) {
$('#onlineList').children('div').filter(function(){
return $(this).attr('name').indexOf($('#searchuser').val()) == -1;
}).remove();
});
理想情况下，过滤器应该足够具体，以便不会捕获任何其他元素。在这种情况下，它只匹配div的子#onlineList，但它可以很容易：
列表中的所有孩子（最快）：
$('#onlineList').children().filter...
或仅匹配name=属性：
$('#onlineList').children('[name]').filter...
或仅div具有name=属性：
$('#onlineList').children('div[name]').filter...
也可以与父ID选择器结合使用：
$('#onlineList > div').filter...
$('#onlineList > div[name]').filter...
根据你的评论，重复的ids只是在样本数据中，所以我没有解决那些
Mr7-itsurdeveloper（下面）提出了一个有趣的建议，你只需隐藏元素而不是删除元素。然后，您可以反复重复按钮。我使用hide()和show()：
$("#gosearchuser").on("click", function (event) {
$('#onlineList').children('div').show().filter(function(){
return $(this).attr('name').indexOf($('#searchuser').val()) == -1;
}).hide();
});
fadeIn()和fadeOut()最佳$("#gosearchuser").on("click", function (event) {
$('#onlineList').children('div').fadeIn().filter(function(){
return $(this).attr('name').indexOf($('#searchuser').val()) == -1;
}).fadeOut();
});
在比较字符串之前，您通常只需要在两个字符串上调用toLowerCase：
$("#gosearchuser").on("click", function (event) {
var searchuser = $('#searchuser').val().toLowerCase();
$('#onlineList').children('div').filter(function(){
return $(this).attr('name').toLowerCase().indexOf(searchuser) == -1;
}).remove();
});
答案 2 :(得分：1)
试试这个：
$("#gosearchuser").on("click", function (event) {
var inputVal = $('#searchuser').val();
$('#onlineList').children().each(function(){
if($(this).attr('name').indexOf(inputVal)==-1)
(this).remove();
});
});
答案 3 :(得分：1)
试试这个：
$("#gosearchuser").on("click", function (event) {
$('#onlineList').children('div').filter(function(){
return $(this).attr('name').toLowerCase().indexOf($('#searchuser').val().toLowerCase()) == -1;
}).remove();
});
答案 4 :(得分：0)
如果您要检查div的属性name，那么您必须这样做：
$("#gosearchuser").on("click", function (event) {
var $searchparam = $('#searchuser').val();
$('div#onlineList div').each(function () {
if ($(this).attr('name') == $searchparam ){
}
else {
this.remove();
}
});
});
如果您正在尝试检查div的文本，那么您必须这样做：
$("#gosearchuser").on("click", function (event) {
var $searchparam = $('#searchuser').val();
$('div#onlineList div').each(function () {
if ($(this).text().trim() === $searchparam ){
} else {
this.remove();
}
});
});
答案 5 :(得分：0)
<强> Working Demo
<强> Jquery的
$("#gosearchuser").on("click", function (event) {
var $searchparam = $('#searchuser').val();
$('div[name="' + $searchparam + '"]').hide();
});
答案 6 :(得分：0)
使用以下代码，这将起作用
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#gosearchuser").on("click", function (event) {
peoplediv = $('#onlineList').children('div');
searchparam = $('#searchuser').val();
$(peoplediv).each(function () {
if ($(this).attr('name') == searchparam ){
alert('jaaaaaaaaaaaaaaaaa');
$(peoplediv).not(this).remove();
}
else {
return;
}
});
}); });
</script>
答案 7 :(得分：0)
确定，
非常感谢你，我选择TrueBlueAussie提供了我需要的答案。
这是现在的代码，也使搜索不敏感，
$("#gosearchuser").on("click", function (event) {
$('#onlineList').children('div').fadeIn().filter(function(){
return $(this).attr('name').toLowerCase().indexOf($('#searchuser').val().toLowerCase()) == -1;
}).fadeOut();
}）; }）;