Remove all other 'vtt cues' from video tag

Question

I have a video tag in which I pass video data i.e src and vtt dynamically, I want to keep vtt for the current video only, and remove all other textTracks.

Right Now on switching the video, all vtt related to previously played videos start playing inside the video tag.

vtt is subtitle

     function addVttInvideo(data) {
        // http://www.html5rocks.com/en/tutorials/track/basics/
        // https://www.iandevlin.com/blog/2015/02/javascript/dynamically-adding-text-tracks-to-html5-video
        var video = document.getElementById('videoSrc');
        var track = video.addTextTrack('subtitles', 'English', 'en');
        track.mode = "showing";
        var startTime = parse_timestamp(data.info.start);
        var endTime = parse_timestamp(data.info.end);
        var cue = new VTTCue(startTime, endTime, data.info.text);

        // track.addEventListener("cuechange", function () {
        //   // get current cue, and remove it if it's number 2
        //   var currentCue = track.activeCues[0];
        //   track.removeCue(currentCue)
        // },false);
        track.addCue(cue);
        // console.log('subtitle.innerHTML',subtitle.innerHTML);
        // quick_and_dirty_vtt_or_srt_parser(subtitle.innerHTML).map(function(cue) {
        //     track.addCue(cue);
        // });
        // track.addCue(quick_and_dirty_vtt_or_srt_parser(2,55,'my profile'));


      }

      function parse_timestamp(s) {
        var match = s.match(/^(?:([0-9]{2,}):)?([0-5][0-9]):([0-5][0-9][.,][0-9]{0,3})/);
        if (match == null) {
          throw 'Invalid timestamp format: ' + s;
        }
        var hours = parseInt(match[1] || "0", 10);
        var minutes = parseInt(match[2], 10);
        var seconds = parseFloat(match[3].replace(',', '.'));
        return seconds + 60 * minutes + 60 * 60 * hours;
      }
    } catch (e) {
      console.log('the exception album ' + e);
    }
// load video is called when user swipe next and back
function loadVideo(way) {
  var videoSrc = $('#videoSrc');
  if (way === 'prev') {
    videoCounter = videoCounter - 1;
    if (videoCounter < 0) videoCounter = VideoData.length - 1;
    videoSrc.attr('src', VideoData[videoCounter].vurl);
    videoSrc.attr('poster', VideoData[videoCounter].turl)
    addVttInvideo(VideoData[videoCounter].vtt)
  } else if (way === 'next') {
    videoCounter = videoCounter + 1;
    if (videoCounter > VideoData.length - 1) videoCounter = 0;
    videoSrc.attr('src', VideoData[videoCounter].vurl);
    videoSrc.attr('poster', VideoData[videoCounter].turl)
    addVttInvideo(VideoData[videoCounter].vtt)
  } else {
    videoSrc.attr('src', VideoData[0].vurl);
    videoSrc.attr('poster', VideoData[0].turl)
    addVttInvideo(VideoData[0].vtt)
    // document.getElementById('vsrc').onloadeddata = function() {
    //   debugger
    //
    // };
  }
  $("#videoAlbumCaption").text(videoCounter + 1 + " / " + VideoData.length);
}

Answer 1

A bit confusing as your question is for removing vtt cue, but from what you described is removing all other textTracks.

I will explain how to remove all other textTracks.

HTML

<video src="foo.ogv">
    <track kind="subtitles" label="English subtitles" src="subtitles_en.vtt" srclang="en" default>
    </track>
    <track kind="subtitles" label="Deutsche Untertitel" src="subtitles_de.vtt" srclang="de">
    </track>
</video>

videoElement.textTracks console output

var videoElement = document.querySelector("video");
console.log(videoElement);

TextTrackList {0: TextTrack, 1: TextTrack, length: 2, onchange: null, onaddtrack: null, onremovetrack: null}
0: TextTrack {kind: "subtitles", label: "English subtitles", language: "en", id: "", mode: "showing", …}
1: TextTrack {kind: "subtitles", label: "Deutsche Untertitel", language: "de", id: "", mode: "disabled", …}
length: 2

Remove Track

var videoElement = document.querySelector("video");
videoElement.removeChild(videoElement.children[0]); //remove English subtitle


// you need iterlate videoElement.textTracks and find index according to language
var i =0;
var targetLanguage = "de";
for (let track of videoElement.textTracks){
    if(track.language !== targetLanguage){
        videoElement.removeChild(videoElement.children[i]);
    }
    i++;
}

As @Heretic Monkey commented, please refer to this for TextTrackList Implementation. Delete a TextTrack from a video