How could i remove specific value from jquery array in jquery

Question

I would like to remove specific value from an array , I have tried following script for delete value from an array but that not working.

HTML that contain values of an array

<input type="hidden" class="image_array" id="image_array" name="image_array[]" value="20200207050212.jpg,20200207050214.jpg">

So my array value is 20200207050212.jpg,20200207050214.jpg & I would like to remove 20200207050212.jpg from this array but not remove when i used following script.

1 Way

$(document).ready(function(){
  $(document).on("click", '.profile_delete_image', function(){
        var getImageName = $(this).attr('data-imagename');
        console.log(getImageName)
        var getImageArray =$('.image_array').val();
        var checkValueExist = (getImageArray.indexOf(getImageName) > -1);
        if(checkValueExist == true){
          var itemtoRemove = getImageName;
          getImageArray = $.grep(getImageArray, function(value) {
            return value != itemtoRemove;      
              console.log(getImageArray)
          });
        }
    });
})

2 Way

$(document).ready(function(){
  $(document).on("click", '.profile_delete_image', function(){
        var getImageName = $(this).attr('data-imagename');
        console.log(getImageName)
        var getImageArray =$('.image_array').val();
        var checkValueExist = (getImageArray.indexOf(getImageName) > -1);
        if(checkValueExist == true){
          var itemtoRemove = getImageName;
          getImageArray.splice(1,1);
        }
    });
})

NOte: when i do console.log it's return separated value like

So I don't want this i only want to remove given value from array and return an array with removed value.

4b0 · Accepted Answer · 2020-02-07 05:38:57Z

1

Just use split() to make string as array.

var getImageName = '20200207050212.jpg' // Get your delete image name. 
var getImageArray = [];
getImageArray = $('.image_array').val().split(',');
getImageArray = getImageArray.filter(e => e !== getImageName);

console.log(getImageArray);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="hidden" class="image_array" id="image_array" name="image_array[]" value="20200207050212.jpg,20200207050214.jpg">

answered Feb 7, 2020 at 5:38

4b0

22.4k30 gold badges97 silver badges143 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Akhil Aravind · Accepted Answer · 2020-02-07 05:28:59Z

0

Take a look at the snippet, This is a simple example, here we have an array of images, when the button is clicked, it will get the images to delete from image_array.

Checks for if images_array has value, and convert it to array using .split(). Then iterate through the array and delete if the value in images array matched.

var $ = jQuery;
var images = ['20200207050212.jpg', '20200207050214.jpg', 'abc.jpg', 'image_123123.jpg'];
$('#delete_image').on('click', function() {
  console.log('before delete', images);
  var image_arr = $('#image_array').val();
  image_arr = image_arr ? image_arr.split(',') : image_arr;
  if (image_arr.length) {
    image_arr.forEach(function(img) {
      if (images.indexOf(img) !== -1) images.splice(images.indexOf(img), 1)

    })
    console.log('after delete', images);
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<input type="hidden" class="image_array" id="image_array" name="image_array[]" value="20200207050212.jpg,20200207050214.jpg">

<button id="delete_image">Delete Image </button>

edited Feb 7, 2020 at 5:28

answered Feb 7, 2020 at 5:23

Akhil Aravind

6,0451 gold badge18 silver badges37 bronze badges

5 Comments

David Over a year ago

I always get following Array after removing the element = ',2,0,2,0,0,2,0,7,0,5,3,5,4,2,.,j,p,g,',,,',2,0,2,0,0,2,0,7,0,5,3,5,4,4,.,j,p,g,'

Akhil Aravind Over a year ago

@David did you run my snippet ??

David Over a year ago

Yes , but when i tried i got same thing that i have just mentioned in comment

David Over a year ago

By the way where you pass deleted image name in your code? \

Akhil Aravind Over a year ago

@David did you meant to remove 20200207050212.jpg from this input ??

<input type="hidden" class="image_array" id="image_array" name="image_array[]" value="20200207050212.jpg,20200207050214.jpg">

Collectives™ on Stack Overflow

How could i remove specific value from jquery array in jquery

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related