How to remove item from parent node after appending

I pick an item to append to a parent node with this method:

for (var i = 0; i < 4; i++){
		myLis[x].addEventListener("click", function() {
function pickItem(x) {
	var div = document.getElementById('addHere');
	var audio = document.createElement('audio');
	div.insertBefore(audio, div.childNodes[0]);

When you use the command console.log(div); it would shows up like this:

<div id="addHere">
	<audio src="1.mp3"></audio>

But when I click on other items on the <li> list for the third time it would show up like this:

<div id="addHere">
	<audio src="1.mp3"></audio>
	<audio src="4.mp3"></audio>
	<audio src="2.mp3"></audio>

All the songs are playing altogether (including three songs you clicked previously [first->one, second->two]) and cause browser aw snap (chrome).
So how do I play only one song at the time.
Thank you,

If you only want one audio element, then why are you adding several? Why not just add one audio element and change its src?