Given the following HTML:

<h2><span>1</span><span>2</span></h2>
<h2><span>1</span><span>2</span></h2>
<h2><span>1</span><span>2</span></h2>
<h2><span>1</span><span>2</span></h2>

I would like to remove the first span element from all the h2 elements.

I tried the following which only remove the first span from the first h2:

$("h2 span:first").remove();
$("h2 span").first().remove();

Given the following HTML:

<h2><span>1</span><span>2</span></h2>
<h2><span>1</span><span>2</span></h2>
<h2><span>1</span><span>2</span></h2>
<h2><span>1</span><span>2</span></h2>

I would like to remove the first span element from all the h2 elements.

I tried the following which only remove the first span from the first h2:

$("h2 span:first").remove();
$("h2 span").first().remove();

• javascript
• jquery

Share Follow asked Jul 11, 2011 at 21:02 capdragoncapdragon 14.9k2424 gold badges110110 silver badges155155 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

Try using the :first-child selector:

$("h2 span:first-child").remove();

Try this

$("h2").each(function(){
   $(this).find("span:first").remove();
});

You can do it like that (jsfiddle as an example):

jQuery('h2 span:first-child').remove();