CODEWITHSUNDEEP
jquery
ingridsede
ingridsede

Reputation: 339

remove div where attr value does not contain string

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.

Upvotes: 3

Views: 1016

Answers (8)

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93571

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

Upvotes: 3

ingridsede
ingridsede

Reputation: 339

Ok,

With many thanks to you all i've chosen TrueBlueAussie to have provided the answer i needed.

This is the code now that also makes the search caseinsensitive,

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

}); });

Upvotes: 0

Mr7-itsurdeveloper
Mr7-itsurdeveloper

Reputation: 1631

use following code ,this will work 

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

Upvotes: 0

Jai
Jai

Reputation: 74738

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.

Upvotes: 4

Ishan Jain
Ishan Jain

Reputation: 8171

Try this:

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

Working Example

Upvotes: 1

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try this:

$("#gosearchuser").on("click", function (event) {
    var inputVal = $('#searchuser').val();
    $('#onlineList').children().each(function(){
      if($(this).attr('name').indexOf(inputVal)==-1)
         (this).remove();

    });
});

Working JSFiddle

Upvotes: 1

SVS
SVS

Reputation: 4275

Working Demo

Jquery

$("#gosearchuser").on("click", function (event) {
    var $searchparam = $('#searchuser').val();
        $('div[name="' + $searchparam + '"]').hide();
});

Upvotes: 0

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62488

If you are trying to check for attribute name of div then you have to do like this:

    $("#gosearchuser").on("click", function (event) {

    var  $searchparam = $('#searchuser').val();

    $('div#onlineList div').each(function () {

        if ($(this).attr('name') == $searchparam ){

        } 
        else {

            this.remove();

        }
      });

 });

UPDATED FIDDLE

If you are trying to check for text of div then you have to do like this:

    $("#gosearchuser").on("click", function (event) {

       var  $searchparam = $('#searchuser').val();

    $('div#onlineList div').each(function () {

        if ($(this).text().trim() === $searchparam ){


        } else {

            this.remove();

        }
     });

 });

FIDDLE DEMO

Upvotes: 0

Related Questions