Remove elements if text matches a string in jQuery

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?

You realise that there are no elements, other than li, that can be a child of the ul or ol elements? Those spans invalidate your HTML. I'd suggest using the ::after pseudo element instead for that presentational aspect. — David Thomas
– David Thomas, Commented Apr 26, 2012 at 10:24

T.J. Crowder · Accepted Answer · 2012-04-26 10:38:58Z

5

There are several ways to do this, but one would be to use $() with a selector to look up the lis, then loop through them (each() is handy for that) using text() to get their text, String#indexOf to check contents, and next() to see if the next thing is a relevant span (but see note below), and of course remove() to remove an element.

When selecting the lis, you can use the special :contains("text") selector jQuery adds, but note that if you do, it means jQuery can't use the browser's built-in tools for finding elements, and so there could be a performance impact.

Note that your HTML is invalid. ul elements cannot have span elements as children; the only valid immediate children of ul elements are li elements (which can have spans inside them if you like). What the browser does when you send invalid markup like that will be browser-dependent.

edited Apr 26, 2012 at 10:38

answered Apr 26, 2012 at 10:22

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Fabrizio Calderan · Accepted Answer · 2012-04-26 10:28:50Z

2

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/

edited Apr 26, 2012 at 10:28

answered Apr 26, 2012 at 10:22

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

3 Comments

Bojangles Over a year ago

+1 This was exactly what I was going for, except cleaner. Nice solution.

Andreas Wong Over a year ago

You could probably explain a bit what your code does :), otherwise nice answer!

Fabrizio Calderan Over a year ago

anyway take seriously into consideration what said @T.J. Crowder. : span are not allowed there

Collectives™ on Stack Overflow

Remove elements if text matches a string in jQuery

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related