Question

I am trying to use the text attribute as a selector, but I can’t quite grasp the behaviour, would really appreciate if someone could explain. For example given <span class="span_class"><a class="a_class">text</a></span>, $('a.a_class').text() gives “text” as expected. However $('a.a_class[text]') wouldn’t match any elements, and neither would $('span.span_class > a.a_class[text]'), but $('span.span_class* > a.a_class[text]') would (although not in IE).
The only workaround I can think of for IE, is loop through all anchors contained in a span, use .text() on each and match it against a certain criteria, but it seems slower than using in-built selectors. Anyone have better ideas?

Answer 1

what about using a custom selector

$(document).ready(function(){
  $.extend($.expr[':'], {
    notext: function(elem, i, attr){
      return( $(elem).text() === "" );
    }
  });        
});

Synopsis

$('span:notext').remove();

you might even want to create a selector that handles Regular Expressions like

$.extend($.expr[':'], {
   'content': function(elem, i, attr){      
     return( RegExp(attr[3]).test($(elem).text()) );
   }
});

Synopsis

$('span:content(^api_)').remove();

would select and remove all spans which text begins with api_