Post
Ask Question

Find and Exclude Element From an Array Using jQuery

We have all worked with jQuery. Sometimes we have also used jQuery arrays. Assume we have an array and in that array we need to exclude a specific element and create a new array without excluding that element. How to do that? We will use a for loop and just loop through the array, apply some conditions and if a criteria matches, we will do some operation. Here I will share you another way to do it, using a function called grep in jQuery. Normally the grep function acts as each in jQuery.

Please see this article in my blog here.

Backgroud

I am working on a client-side application where there are many client-side arrays and variables. We handle our entire client-side processes using jQuery. I usually go through the operation of finding and removing array elements using jQuery. I thought it would be better if I share some knowledge about it here. I hope it will be helpful for users.

Using the code

To start you need to include a jQuery reference.

  1. <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>  

Consider the following as our array.

  1. var myArray = ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']  

Next, we will formulate this array to a HTML table, so that the visualization will be perfect. To do this we will have a function that will just convert the array elements to a HTML table. The following is our function body:

  1. function buildTable(array,message){  
  2.    var html='<table><caption>'+message+'</caption><tr>';  
  3.    for(var i=0;i<array.length;i++)  
  4.    {  
  5.       html+='<td>'+array[i]+'</td>';  
  6.    }  
  7.    html+='</tr></table>';  
  8.    $("#body").html(html);  
  9. }  

 

  1. <style>    
  2. tr {  
  3.   border: 1px solid #ccc;  
  4. }  
  5.   
  6. td {  
  7.   border: 1px solid #ccc;  
  8.   padding: 10px;  
  9. }  
  10.   
  11. #body {  
  12.   margin: 30px;  
  13. }  
  14.   
  15. #click {  
  16.   margin: 30px;  
  17.   cursor: pointer;  
  18. }    
  19. </style>   
As you can see, the parameters for the functions are an array and a caption message.

Now we need to call this function, right? 
  1. var myArray = ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']           
  2. var message="My Array Elements Before Removing";  
  3. buildTable(myArray,message);  

Style the HTML table by providing the preceding styles.  

So our output will be as follows.

list

Now we need to fire a click event in which we will determine which element is to be excluded from the array and finally assign a new element set to our existing array.

  1. <a hrefe="#" id="click">Click To Remove</a>   
  1. $("#click").click(function() {  
  2.     var message = "My Array Elements After Removing";  
  3.     var excludedElement = ['Thursday'];  
  4.     myArray = jQuery.grep(myArray, function(value) {  
  5.         return value != excludedElement;  
  6.     });  
  7.     buildTable(myArray, message);  
  8. });  
Here we are finding the element "Thursday" that we saved to a variable as follows. 
  1. var excludedElement = ['Thursday'];        

Now jQuery.grep will return our new array with filtered data.

  1. return value != excludedElement;           

And then we are calling our buildTable function to formulate our new array to a HTML table. Once we call it we will get output as follows.

Array element
Complete Code

  1. <html>  
  2.     <head>  
  3.         <title>Remove Elements From An Array using JQuery- Sibeesh Passion</title>  
  4.         <style>    
  5.             tr{    
  6.                 border:1px solid #ccc;    
  7.             }    
  8.             td{    
  9.                 border:1px solid #ccc;    
  10.                 padding: 10px;    
  11.             }    
  12.             #body{    
  13.                 margin: 30px;    
  14.             }    
  15.             #click{    
  16.                 margin: 30px;    
  17.                 cursor:pointer;    
  18.             }    
  19.         </style>  
  20.         <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>  
  21.     </head>  
  22.     <body>  
  23.         <a hrefe="#" id="click">Click To Remove</a>  
  24.         <div id="body"></div>  
  25.         <script>    
  26.             $(document).ready(function(){    
  27.                 var myArray = ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']              
  28.                 var message="My Array Elements Before Removing";    
  29.                 buildTable(myArray,message);    
  30.                 $("#click").click(function(){    
  31.                     var message="My Array Elements After Removing";    
  32.                     var excludedElement = ['Thursday'];    
  33.                     myArray = jQuery.grep(myArray, function(value) {    
  34.                         return value != excludedElement;    
  35.                     });    
  36.                     buildTable(myArray,message);    
  37.                 });    
  38.             });    
  39.             function buildTable(array,message){    
  40.                 var html='  
  41.                     <table>  
  42.                         <caption>'+message+'</caption>  
  43.                         <tr>';    
  44.                             for(var i=0;i <array.length;i++)    
  45.                             {    
  46.                                 html+='<td>'+array[i]+'</td>';    
  47.                             }    
  48.                             html+='  
  49.                         </tr>  
  50.                     < /table>';    
  51.                     $("#body").html(html);    
  52.                 }    
  53.   
  54.             </script>  
  55.         </body>  
  56.     </html>   

Demo

Please find the demo in jsfiddle here: Exclude or remove elements

Conclusion

I hope you liked this article. Please share with me your feedback. Thanks in advance.


Similar Articles