title: Dynamically load iframe on click
body: <p>I have a <strong>bootstrap 3</strong> columns youtube videos</p>
  
  <pre><code>&lt;div class="col-md-4"&gt;
    &lt;div class="video_img_wrapper"&gt;
      &lt;img class="video_img" data-toggle="modal" class="ytVideo" id="'.$item-&gt;id-&gt;videoId.'" data-target="#myModal_'.$item-&gt;id-&gt;videoId.'" src="'.$thumbnailUrl.'" /&gt;
      &lt;img src="'.get_bloginfo('template_url').'/assets/img/playicon-nl.png" class="fa-play-circle-o" aria-hidden="true" data-toggle="modal" data-target="#myModal_'.$item-&gt;id-&gt;videoId.'" /&gt;
    &lt;/div&gt;
    &lt;div class="video_title"&gt;&lt;span&gt;'. $item-&gt;snippet-&gt;title .'&lt;/span&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="modal fade youtube-modal" id="myModal_'.$item-&gt;id-&gt;videoId.'" role="dialog"&gt;
    &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-body" id="videoModalBody"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And I am injecting an iframe using jquery in the <code>#videoModalBody</code> div</p>
  
  <pre><code>$(".video_img").click(function(evt){
    var videoId = $(this).attr("id");
    var iframe = '&lt;iframe enablejsapi=1 id="myModal_'+videoId+'" width="850" height="500" src="https://www.youtube.com/embed/'+videoId+'" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;';
    $("#videoModalBody").append(iframe);
  });
  </code></pre>
  
  <p>How can I change my Javascript so when I click on another video the previous one gets removed out of the DOM?</p>