Delete first list item with jQuery

Question

I have the following list:

<ul id="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> 

How can I use jQuery to remove the first element of this list (i.e., number 1) and leave the remaining elements intact?

I would have thought that this has a pretty simple solution, but it turned out to be harder than I expected to answer.

Answer 1

 $('#list li').first().remove(); 

JsFiddle example

Ref:

• first
• remove

You can also perform a similar effect using pure CSS3 (without JavaScript) with:

 #list li:nth-child(1) { display:none; }​ 

Answer 2

 $("#list li:first-of-type").remove();