删除<span>一个</span> <div>

Question

I have the following code:

<div id="weeks"> 
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
</div>

I want to be able to call a JavaScript function that will remove the first <span> whenever I call it (so the first time I call it, it'll remove the <span> with 1 in it, the next time 2, etc.), what's the best way to go about this?

Thank you!

Answer 1

Use this function:

function removeFirst(selector){
   $(selector).children().first().remove();
}

So it takes the jquery selector as a parameter. Use it like this:

removeFirst('#weeks');

That will remove the first child every time you call it.

Answer 2

In plain JavaScript you could do:

var weeks = document.getElementById("weeks");
weeks.removeChild(weeks.firstElementChild);

JsFiddle Complete Example