Question

I have the following markup:

<div id="breadcrumbs">
  <ul>
   <li><span class="crumblink"><a href="/">Home</a></span></li>
   <span class="arrows"> »</span>  
   <li><span class="crumblink"><a href="/locations-brands">Publishing Regions</a></span></li>
   <span class="arrows"> »</span>  
   <li><span class="crumblink"><a href="/locations-brands/publications">Locations &amp; Brands</a></span></li>
   <span class="arrows"> »</span>
   <li><span class="crumblink"><a href="/locations-brands/publications/popupbrand">Publications</a></span></li>
   <span class="arrows"> »</span>  
  </ul>
</div>

How can I remove a <li> if has string “Publications” as well as its next span.arrows?

Answer 1

try this:

$('#breadcrumbs li:contains("Publications")')  
     /* find li node containing Publications */
  .next('span').remove().end()                
     /* search next span and remove it */
  .remove();                                   
     /* end() reset last selection (made with next()), so last remove() is removing the li */

example fiddle: http://jsfiddle.net/MZysf/