Selecting each first anchor within span
Hi,
From the code below, generated by a CMS, I want to remove each first anchor from within the locationDisplayTrailNonterminalElement spans.
I can select and remove all anchors with $('.locationDisplayTrailNonterminalElement').find('a').empty();
I can select and remove the very first anchor with $('.locationDisplayTrailNonterminalElement').find('a').slice(0,1).empty();
But how can I select
EACH first anchor within the locationDisplayTrailNonterminalElement spans and then remove it?
Thanks, Robert.
This is my HTML:
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<body>
<ul>
<li>
<span class="itemBreadcrumb">
<span class="locationDisplayTrailNonterminalElement">
<a href="#">
<img height="8" border="0" width="8" alt="" src="space.gif"/>
<img height="16" border="0" width="16" alt="Centrale werkomgeving" src="icon_library.gif"/>
</a>
<a href="#">
<span title="Centraal">Centraal</span>
</a>
<a onclick="" href="">
<img border="0" alt="Functions" name="x2000" src="actions.gif"/>
</a>
</span>
</span>
</li>
<li>
<span class="itemBreadcrumb">
<span class="locationDisplayTrailNonterminalElement">
<a href="#">
<img height="8" border="0" width="8" alt="" src="space.gif"/>
<img height="16" border="0" width="16" alt="Centrale werkomgeving" src="icon_library.gif"/>
</a>
<a href="#">
<span title="Centraal">Centraal</span>
</a>
<a onclick="" href="">
<img border="0" alt="Functions" name="x2000" src="actions.gif"/>
</a>
</span>
<span class="locationDisplayTrailNonterminalElement">
<a href="#">
<img height="8" border="0" width="8" alt="" src="space.gif"/>
<img height="16" border="0" width="16" alt="Map" src="folder.gif"/>
</a>
<a href="#">
<span title="Documenten">Documenten</span>
</a>
<a onclick="" href="">
<img border="0" alt="Functions" name="x5963" src="actions.gif"/>
</a>
</span>
</span>
</li>
<li>
<span class="itemBreadcrumb">
<span class="locationDisplayTrailNonterminalElement">
<a href="#">
<img height="8" border="0" width="8" alt="" src="space.gif"/>
<img height="16" border="0" width="16" alt="Centrale werkomgeving" src="icon_library.gif"/>
</a>
<a href="#">
<span title="Centraal">Centraal</span>
</a>
<a href="">
<img border="0" alt="Functions" name="x2000" src="actions.gif"/>
</a>
</span>
<span class="locationDisplayTrailNonterminalElement">
<a href="#">
<img height="8" border="0" width="8" alt="" src="space.gif"/>
<img height="16" border="0" width="16" alt="Map" src="folder.gif"/>
</a>
<a href="#">
<span title="Test lab">Test lab</span>
</a>
<a onclick="" href="">
<img border="0" alt="Functions" name="x5964" src="actions.gif"/>
</a>
</span>
</span>
</li>
</ul>
</body>
</html>