remove div where attr value does not contain string

Question

I have this dynamically formed divs that appear inside an already existing 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>

What i want to make is a jquery function that removes the divs that do not contain the string passed by an inputfield.

    <input type="text" id="searchuser" value="" />
    <input type="button" id="gosearchuser" value=">" />

I've put together a Jfidle http://jsfiddle.net/38Ndw/1/ where you can see jquery that's obviously not working.

Answer 1

Try with this using .filter():

$("#gosearchuser").on("click", function (event) {
    $('#onlineList').children('div').filter(function(){
        return $(this).attr('name').indexOf($('#searchuser').val()) !== -1;
    }).remove();
});

Demo

---

Note:

You have a invalid html markup because of duplicacy of ids again and again.

Answer 2

This answer assumes a case-insensitive, partial match search of the name attributes is required (now confirmed from comments):

For your specific example problem, I kind of like slideUp() and slideDown() as they move the remaining elements correctly and leave them in place so the filter can be changed again and again:

Final JSFiddle: http://jsfiddle.net/38Ndw/25/

It uses a filter function which is basically a callback that gets passed each matching element in turn. If the function returns true (to include) or false (to exclude) this changes the resulting list. slideUp() (was remove()) is then applied only to the resulting matches.

This one also includes the case-insensitive matching you wanted.

$("#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();
});

This is also slightly more efficient as it only searches for $('#searchuser') once (which is preferable to searching the same element/value, over and over, for every matching element).

---

Old versions below

JSFiddle: http://jsfiddle.net/38Ndw/8/

It uses a filter function which is bascially a callback that gets passed each matching element in turn. If it returns true (to include) or false (to exclude) this changes the resulting list. remove() is then applied only to the result matches.

$("#gosearchuser").on("click", function (event) {
    $('#onlineList').children('div').filter(function(){
        return $(this).attr('name').indexOf($('#searchuser').val()) == -1;
    }).remove();
});

Ideally the filter should be specific enough to not catch any other elements. In this case it matches just the child divs of #onlineList but it could just as easily be:

all children of the list (fastest):

$('#onlineList').children().filter...

or match just those with a name= attribute:

$('#onlineList').children('[name]').filter...

or just divs with a name= attribute:

$('#onlineList').children('div[name]').filter...

which can also be combined with the parent id selector:

$('#onlineList > div').filter...
$('#onlineList > div[name]').filter...

based on your comments the duplicate ids are just in the sample data, so I have not addressed those

Mr7-itsurdeveloper (below) made an interesting suggestion, that you simply hide the element rather that remove them. You can then repeat the button over and over. Instead of classes I have used hide() and show():

JSFiddle: http://jsfiddle.net/38Ndw/17/

$("#gosearchuser").on("click", function (event) {
    $('#onlineList').children('div').show().filter(function(){
        return $(this).attr('name').indexOf($('#searchuser').val()) == -1;
    }).hide();
});

personally I like fadeIn() and fadeOut() best

JsFiddle: http://jsfiddle.net/38Ndw/18/

$("#gosearchuser").on("click", function (event) {
    $('#onlineList').children('div').fadeIn().filter(function(){
        return $(this).attr('name').indexOf($('#searchuser').val()) == -1;
    }).fadeOut();
});

Update: Case-insensitive matching

You normally just need to call toLowerCase on both strings before comparing the strings:

JSFiddle: http://jsfiddle.net/38Ndw/24/

$("#gosearchuser").on("click", function (event) {
    var searchuser = $('#searchuser').val().toLowerCase();
    $('#onlineList').children('div').filter(function(){
        return $(this).attr('name').toLowerCase().indexOf(searchuser) == -1;
    }).remove();
});