Question

Given this HTML:

<a href="#" class="artist">Soulive<span class="create-play">Play</span></a>

I want to get the text content of the a (which is this in the context of my function) without the text content of the span, so I’m left with:

Soulive

If I do:

$(this).text();

I get:

SoulivePlay

How do I exclude the text content of the span?

Answer 1

A micro-plugin:

$.fn.ignore = function(sel) {
  return this.clone().find(sel || ">*").remove().end();
};

…having this HTML:

<div id="test"><b>Hello</b><span> World</span>!!!</div>

will result in:

var text = $('#test').ignore("span").text(); // "Hello!!!"
var html = $('#test').ignore("span").html(); // "<b>Hello</b>!!!"

---

^{if you want it faster and you need only to exclude the immediate children… use .children( instead of .find(}