hide div when not clicking on it

[sw45acp]

Hi, I have the following javascript:

function createDiv() {
var newDiv = document.createElement("div");
newDiv.setAttribute("id","box");
document.body.appendChild(newDiv);
var box = document.getElementById("box");
}

and html:

<input type="button" value="Create Div" onclick="createDiv()" />

that creates a new div on the page. What I would like is for this div to completely disappear when a user clicks anywhere else on the page. What I mean can generally be seen on any javascript date picker/calendar for forms.

 

Any help is appreciated, thank you.