CODEWITHSUNDEEP
javascriptjqueryarrays
David Hope
David Hope

Reputation: 1546

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

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.

Upvotes: 0

Views: 87

Answers (2)

charlietfl
charlietfl

Reputation: 171690

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>

Upvotes: 1

Malik Tauqeer
Malik Tauqeer

Reputation: 7

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

Upvotes: 0

Related Questions