How can remove multiple playlist items on click?

Question

image I have an api that loads 10 items from a Jasonfile When i click the mehr(more) button. If clicked again, it loads 10 more and so on... In the JPlayer documentation, they only show how to remove 1 item at a time:

  myPlaylist.remove(); // Removes all items
  myPlaylist.remove(0); // Removes the 1st item
  myPlaylist.remove(1); // Removes the 2nd item
  myPlaylist.remove(-1); // Removes the last item 

Is it possible to remove 10 items at once when i click the weniger(less) button? I tried this:

$(".pc-less-btn.btn-{{ pk }}").click(function() {
  myPlaylist.remove(10); // To Removes 10 items but doesn't works
});

Answer 1

Option 1: set new playlist

$(".pc-less-btn.btn-{{ pk }}").click(function() {
  const removeFromIndex = 10
  // remove from end
  const newPlaylist = myPlaylist.playlist.slice(myPlaylist.playlist.length - removeFromIndex)
  // remove from start
  // const newPlaylist = myPlaylist.playlist.slice(removeFromIndex)
  myPlaylist.setPlaylist(newPlaylist)
});

Option 2: remove one by one (Not recommended)

$(".pc-less-btn.btn-{{ pk }}").click(function() {
  for (let i = 0; i < 10; i++) {
    myPlaylist.remove(i); // indexes of playlist probably changes
  }
});

Answer 2

Here is the tricky solution. I wanted to remove all the items from the playlist so I was looking for the solution so I found this trick so far it works for me. I've tested in version 2.9.2

Suppose your playlist object is player so on any jQuery click event you can get your selected list indexes like this

$("#selector_id").on("click", function (e) {
    var object = $(this);
    var ids = []; // Fetch you ids in your way, either checkbox or anything or manual enter

    // Then get the playlist from the player object.
    var playlist = player.playlist;
    // Check if playlist has data.
    if (playlist && playlist.length) {
        var new_playlist = [];
        $.each(playlist, function (index, item) {
            // If index is not in your ids then get the playlist item.
            if (!ids.includes(index)) {
                new_playlist.push(item);
            }
        });

        // Now you have new playlist after removing selected items.
        // Check if we have anything in new playlist.
        if (new_playlist.length) {
            // If we have data in new playlist then init playlist.
            player._initPlaylist(new_playlist);
            // Then call the refresh function with clearMedia event.
            player._refresh(function () {
                $(player.cssSelector.jPlayer).jPlayer("clearMedia");
            });

            // You can call update Control if you have Controls enabled.
        }
    }
});