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. }
  6. td {
  7. border: 1px solid #ccc;
  8. padding: 10px;
  9. }
  11. #body {
  12. margin: 30px;
  13. }
  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. }
  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.