Find And Exclude Element From Array

Sibeesh Passion

4.59/5 (8 votes)

Aug 5, 2015

CPOL

2 min read

8658

In this post, we will discuss about finding and excluding element from JQuery Array.

In this post, we will discuss about finding and excluding element from JQuery Array. We all worked in a JQuery. Sometimes, we work in JQuery Arrays too. Right? Consider we have an array, and in that array we need to exclude a particular element and create a new array without excluded element. What we will do? 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 right? Here I am going to share with you another way that we can achieve this by using a function called grep in JQuery. Normally grep function acts as each in JQuery.

Background

I am working on a client side application where there are lots of client side arrays and variables. We handle our entire client side processes by 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 that here. I hope someone will find it useful.

Using the Code

To start with, you need to include jquery reference.

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

Now, we need an array right? Consider the following is our array.

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

Next, we will formulate this array to an HTML table, so that the visualization will be perfect. To do this, we will have a function, which will just convert the array element to an HTML table. Following is our function body.

function buildTable(array,message){
	      var html='<table><caption>'+message+'</caption><tr>';
		  for(var i=0;i<array.length;i++)
		  {
			html+='<td>'+array[i]+'</td>';
		  }
		  html+='</tr></table>';
		  $("#body").html(html);
	   }

As you can see, the parameters for this function are, an array and a caption message.
Now, we need to call this function right?

 var myArray = ['Monday','Tuesday',
'Wednesday','Thursday','Friday','Saturday','Sunday']			
			var message="My Array Elements Before Removing";
			buildTable(myArray,message);

Style out HTML table by giving the preceding styles.

 <style>
		  tr{
		     border:1px solid #ccc;
		  }
		  td{
			 border:1px solid #ccc;
			 padding: 10px;
		  }
		  #body{
		    margin: 30px;
		  }
		  #click{
		    margin: 30px;
			cursor:pointer;
		  }
		  
      </style>

So, our output will be as follows:

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

<a hrefe="#" id="click">Click To Remove</a>

$("#click").click(function(){
				var message="My Array Elements After Removing";
				var excludedElement = ['Thursday'];
				myArray = jQuery.grep(myArray, function(value) {
				return value != excludedElement;
			    });
			    buildTable(myArray,message);
			});

Here, we are finding the element ‘Thursday’ which we saved to a variable as follows:

var excludedElement = ['Thursday'];

Now our real here is jQuery.grep, which returns our new array with filtered data.

return value != excludedElement;

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

Complete Code

<html>
   <head>
      <title>Remove Elements From An Array using JQuery- Sibeesh Passion</title>
      <style>
		  tr{
		     border:1px solid #ccc;
		  }
		  td{
			 border:1px solid #ccc;
			 padding: 10px;
		  }
		  #body{
		    margin: 30px;
		  }
		  #click{
		    margin: 30px;
			cursor:pointer;
		  }
		  
      </style>
      <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
   </head>
   <body>
   <a hrefe="#" id="click">Click To Remove</a>
   <div id="body"></div>
      <script>	  
       $(document).ready(function(){
		    var myArray = ['Monday','Tuesday','Wednesday',
		    'Thursday','Friday','Saturday','Sunday']			
			var message="My Array Elements Before Removing";
			buildTable(myArray,message);
			
			$("#click").click(function(){
				var message="My Array Elements After Removing";
				var excludedElement = ['Thursday'];
				myArray = jQuery.grep(myArray, function(value) {
				return value != excludedElement;
			    });
			    buildTable(myArray,message);
			});
	   });
	   function buildTable(array,message){
	      var html='<table><caption>'+message+'</caption><tr>';
		  for(var i=0;i<array.length;i++)
		  {
			html+='<td>'+array[i]+'</td>';
		  }
		  html+='</tr></table>';
		  $("#body").html(html);
	   }
      </script>
	  
   </body>
</html>

Demo

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

Conclusion

I hope you liked this tip. Please share your feedback. It is always welcome. Thanks!