How to remove an html element according to its contents with jquery?

Question

If I have some html like this.

<ul class="menu">
 <li>
  <a href="pageGreen">
   pageGreen
  </a>
 </li>
 <li>
  <a href="pageBlue">
   pageBlue
  </a>
 </li>
 <li>
  <a href="pageRed">
   pageRed
  </a>
 </li>
 <li>
  <a href="page1">
   page1
  </a>
 </li>
 <li>
  <a href="page2">
   page2
  </a>
 </li>
 <li>
  <a href="page3">
   page3
  </a>
 </li>
</ul>

How would I remove the entire LI element for pageGreen and pageBlue only, using jquery?

Answer 1

something like this could work

$("a[href='pageGreen']").parent().remove();

Answer 2

You could try something like....

$("li a").each(function() {
if($this).html() == "pageGreen" || $(this).html() == "pageBlue") {
$(this).closest("li").fadeOut();
} 
});

Might need tweaking

Answer 3

Try jQuery’s :contains() selector:

$("li:contains(pageGreen), li:contains(pageBlue)").remove();