Find and Exclude Element From an Array Using jQuery

Sibeesh Venu
9y
6.2k
0
0

Article

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.

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

Consider the following as our array.

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:

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

<style>
tr {
border: 1px solid #ccc;
}
td {
border: 1px solid #ccc;
padding: 10px;
}
#body {
margin: 30px;
}
#click {
margin: 30px;
cursor: pointer;
}
</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?

var myArray = ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']
var message="My Array Elements Before Removing";
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.

<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" that we saved to a variable as follows.

var excludedElement = ['Thursday'];

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

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

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