Question

I’ve created the function below to create a load of video elements but how can I get javascript to delete it again or replace elements after these have been loaded? I’ve got another two functions like this that just load different videos. I want these elements to dissapear when either one of the other two function is called, so the new video elements can be seen.

function createVideo1(){
//alert("createSmallVideo has been called");  
var video = document.createElement("video");
video.setAttribute("id", "VideoElement");
video.setAttribute("src", "videos/surfing with friends.ogv");
video.setAttribute("controls", ""); 
video.setAttribute("width", "480");
video.setAttribute("height", "300");
document.getElementById("VideoContainer").appendChild(video);
video.play();
}

Answer 1

Replace

document.getElementById("VideoContainer").appendChild(video);

With

var container = document.getElementById("VideoContainer");
container.replaceChild(video, container.firstElementChild);

This way your simply replacing the video element that’s already there with a new video element.