How to remove item from parent node after appending

JavaScript
1

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


for (var i = 0; i < 4; i++){
	(function(x){
		myLis[x].addEventListener("click", function() {
			pickItem(x);
		});
	})(i);
}
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>
</div>

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>
</div>

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,

2

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