title: Memory leak in javascript and video-js on all browsers (with the simplest example)
body: <p>Update 2: already reported bug on video.js github. However, I still didn't find the cause of this bug. So this question remains open.</p>
  
  <p>I have to say that those two who gave -2 are unreasonable and ignorable foolish people.</p>
  
  <hr>
  
  <p>Update: I don't know who gave -1 to this question, especially he couldn't answer it.</p>
  
  <p>I tried printing out all created new components and disoposed components of video-js.</p>
  
  <p>I found that, after calling player.dispose, although most of the components, including the outer DIV, the inner VIDEO got disposed, there are some inner components, including 2 DIV, 3 LI, 2 BUTTON, and many SELECT are not disposed.</p>
  
  <p>And I think those non-disposed elements keep in vjs.cache, and because the event listener callback (closures maybe) has dependency on context of the player object itself. So the main player is never disposed even the main DIV and VIDEO are removed from vjs.cache.</p>
  
  <p>Specifically, the items not removed from vjs.cache includes:</p>
  
  <pre><code>1. DIV with contents: &lt;ul class="vjs-menu-content"&gt;&lt;/ul&gt;
  2. Another DIV with contents: &lt;ul class="vjs-menu-content"&gt;&lt;/ul&gt;
  3. LI with contents: subtitles off, captions off, and English
  4. BUTTONs with contents: done and defaults
  5. SELECTs with contents: 
  5.1) &lt;option value=""&gt;---&lt;/option&gt;&lt;option value="#FFF"&gt;White&lt;/option&gt;&lt;option value="#000"&gt;Black&lt;/option&gt;&lt;option value="#F00"&gt;Red&lt;/option&gt;&lt;option value="#0F0"&gt;Green&lt;/option&gt;&lt;option value="#00F"&gt;Blue&lt;/option&gt;&lt;option value="#FF0"&gt;Yellow&lt;/option&gt;&lt;option value="#F0F"&gt;Magenta&lt;/option&gt;&lt;option value="#0FF"&gt;Cyan&lt;/option&gt;
  
  5.2) &lt;option value=""&gt;---&lt;/option&gt;&lt;option value="1"&gt;Opaque&lt;/option&gt;&lt;option value="0.5"&gt;Semi-Opaque&lt;/option&gt;
  
  5.3) &lt;option value="0.50"&gt;50%&lt;/option&gt;&lt;option value="0.75"&gt;75%&lt;/option&gt;&lt;option value="1.00" selected=""&gt;100%&lt;/option&gt;&lt;option value="1.25"&gt;125%&lt;/option&gt;&lt;option value="1.50"&gt;150%&lt;/option&gt;&lt;option value="1.75"&gt;175%&lt;/option&gt;&lt;option value="2.00"&gt;200%&lt;/option&gt;&lt;option value="3.00"&gt;300%&lt;/option&gt;&lt;option value="4.00"&gt;400%&lt;/option&gt;
  
  5.4) &lt;option value="none"&gt;None&lt;/option&gt;&lt;option value="raised"&gt;Raised&lt;/option&gt;&lt;option value="depressed"&gt;Depressed&lt;/option&gt;&lt;option value="uniform"&gt;Uniform&lt;/option&gt;&lt;option value="dropshadow"&gt;Dropshadow&lt;/option&gt;
  
  5.5) &lt;option value=""&gt;Default&lt;/option&gt;&lt;option value="monospaceSerif"&gt;Monospace Serif&lt;/option&gt;&lt;option value="proportionalSerif"&gt;Proportional Serif&lt;/option&gt;&lt;option value="monospaceSansSerif"&gt;Monospace Sans-Serif&lt;/option&gt;&lt;option value="proportionalSansSerif"&gt;Proportional Sans-Serif&lt;/option&gt;&lt;option value="casual"&gt;Casual&lt;/option&gt;&lt;option value="script"&gt;Script&lt;/option&gt;&lt;option value="small-caps"&gt;Small Caps&lt;/option&gt;
  </code></pre>
  
  <p>I am still searching on how to remove them.</p>
  
  <p>I just wonder why video.js, with its version up to 5.0.0, has never considered such memory leaks.</p>
  
  <hr>
  
  <p>Original Question:</p>
  
  <p>I have simply 2 buttons, 1 to add the video, and 1 to delete the video.</p>
  
  <p>The video source is on my local machine, You can change the video source for your testing.</p>
  
  <p>The source codes are as follows and easy to understand.</p>
  
  <p>The problem of this code (with chrome memory snapshot) is that,</p>
  
  <ol>
  <li>Initial: memory 5.5MB</li>
  <li>When you click add, memory: 6.5MB (my video is about 800k-1MB per video)</li>
  <li>When you click delete, memory: 6.3MB</li>
  <li>When you click add again, memory: 6.8MB </li>
  <li>When you click delete, memory: 6.7MB</li>
  <li>When you click add again, memory: 7.0MB</li>
  </ol>
  
  <p>and etc.</p>
  
  <p>The memory just stacks up.</p>
  
  <p>The video-js version is 4.12.7. I tried video-js 5.0.0 and there's no luck, it's same.</p>
  
  <p>Anyone knows what's wrong with my code or what's wrong with video-js? How can prevent this leak?</p>
  
  <p>Thanks.</p>
  
  <pre><code>&lt;link href="/js/video-js/video-js.css" rel="stylesheet"&gt;
  &lt;script src="/js/video-js/video.dev.js"&gt;&lt;/script&gt;
  &lt;script src="/js/jquery-1.11.2.min.js"&gt;&lt;/script&gt;
  
  
  &lt;script&gt;
  function video_html(id) {
    return '&lt;video id="video-js-player" class="video-js vjs-default-skin" ' +
    ' preload="auto" width="960" height="540"  crossorigin="anonymous" ' +
    'data-setup=\'{"example_option":true}\'&gt;' +
    '\t&lt;source src="http://192.168.101.1:20001/live/' + id + '.mp4" type="video/mp4" /&gt; \n' +
    '\t\t&lt;track id="video-vtt" kind="subtitle" label="english" srclang="en" src="http://192.168.101.1:20001/live/' + id + '.vtt" default&gt;&lt;/track&gt;\n ' +
    '\t\t&lt;p class="vjs-no-js"&gt;To view this video please enable JavaScript, and consider upgrading to a web browser that &lt;a href="http://videojs.com/html5-video-support/" target="_blank"&gt;supports HTML5 video&lt;/a&gt;&lt;/p&gt;\n' +
    '&lt;/video&gt;';
  
  };
  var player;
  
  var insertVideo = function(){
    console.log("insert video");
    $.ajax({
      method:"GET",
      data:{},
      url: "http://192.168.101.1:20001/live/list", 
      success: function(list){
        keys = list["keys"];
        newest_key = keys[keys.length - 1];
        $("#video-container").html(video_html(newest_key));
        player = videojs("video-js-player", {}, function() {} );
      }
    });
  };
   var removeVideo = function() {
         console.log("remove video");
         $('#video-container').html('');
         if (player) {
           player.dispose();
           player = null;
         }
       }
  
  
  
  $(document).ready(function() {
      $('#delete').click(function(e){
        e.preventDefault();
        removeVideo();
      });
  
  $('#add').click(function(e){
    e.preventDefault();
    removeVideo();
    insertVideo();
  });
  
  });
  &lt;/script&gt;
  
  &lt;a id="add" href="#add"&gt;Add&lt;/a&gt;
  &lt;a id="delete" href="#delete"&gt;Delete&lt;/a&gt;
  &lt;div class="container" id="video-container"&gt;
  &lt;/div&gt;
  </code></pre>