jQuery: remove 1 item from array after the selected item?

Question

I create an array based on some button clicks.

Every time a button is clicked I get its data-video value and add that to an array.

I then immediately, add an extra video ( intro.mp4 ) after each video that I add to my array.

This works fine.

Now, if I click on the same button(s) that I clicked on once, that item will be removed from the array.

This works fine too.

But I need to remove the intro.mp4 that I added for that particular video as well. But when I try my code, it will remove all the intro.mp4 items from my array. I just need to delete 1 after the selected item.

Here is my code to help you understand better:

 var videoSource = []; $(document).on('click', '.pSelection', function(e) { var vidToAdd = $(this).attr("data-video"); ///check if its added///// if ($(this).hasClass("added")) { $(this).removeClass("added"); e.stopPropagation(); videoSource = videoSource.filter(x => x != vidToAdd); videoSource = videoSource.filter(x => x != 'intro.mp4'); console.log(videoSource); } else { $(this).addClass('added'); videoSource.push(vidToAdd); videoSource.push('intro.mp4'); var videoCount = videoSource.length; console.log(videoSource); e.stopPropagation(); $('.buildExDrop').hide(); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="pSelection" data-video="vid1.mp4"> Video 1 </button> <button class="pSelection" data-video="vid2.mp4"> Video 2 </button> <button class="pSelection" data-video="vid3.mp4"> Video 3 </button> <button class="pSelection" data-video="vid4.mp4"> Video 4 </button> <button class="pSelection" data-video="vid5.mp4"> Video 5 </button> 

My problem is this part of my code as I understand:

videoSource = videoSource.filter(x => x != 'intro.mp4');

This is telling the code to remove all the instances of intro.mp4 from the array.

But I don't know how to target only 1 after the selected item to remove it.

Could someone please advice on this issue?

To test the code above, click on a few buttons and keep looking at the console.log(); ...

once you have added a few items to array, click on one of the buttons that you've already added and see what happens.

Answer 1

You could use Array#splice() to remove the 2 entries by starting at the index of the known one

 var videoSource = []; $(document).on('click', '.pSelection', function(e) { var vidToAdd = $(this).attr("data-video"); ///check if its added///// if ($(this).hasClass("added")) { $(this).removeClass("added"); e.stopPropagation(); // make sure value is in array let sourceIndex = videoSource.indexOf(vidToAdd); if (sourceIndex > -1) { // then remove 2 elements videoSource.splice(sourceIndex, 2) } console.log(videoSource); } else { $(this).addClass('added'); videoSource.push(vidToAdd); videoSource.push('intro.mp4'); var videoCount = videoSource.length; console.log(videoSource); e.stopPropagation(); $('.buildExDrop').hide(); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="pSelection" data-video="vid1.mp4"> Video 1 </button> <button class="pSelection" data-video="vid2.mp4"> Video 2 </button> <button class="pSelection" data-video="vid3.mp4"> Video 3 </button> <button class="pSelection" data-video="vid4.mp4"> Video 4 </button> <button class="pSelection" data-video="vid5.mp4"> Video 5 </button> 

Answer 2

You can simply loop the videoSource array and find the index of videoLink you need to remove and store it in some variable.

var foundIndex = videoSource.indexOf("NAME OR LINK OF THE VIDEO");

then remove that item and to remove intro.mp4 next to that link. you can remove it by using foundIndex + 1