jQuery text() filter results before passing to another element

Question

The following is a simplified excerpt from my code:

$('a').on('click', function()
{
    // Get the text from the link
    var textIwantToUse = $(this).text();

    // Set the elements text to that of the link
    $('elementIwantToPassTheTextTo').text(textIwantToUse);
}

The problem I have is the link contains a span with some text I don't want:

<a href="#">I want this text <span>but not this</span></a>

How can I remove the text in the span tag before I pass it to the target element?

Many thanks in advance.

Answer 1

use .contents() and .filter to select only text nodes, then grab the text of those:

var txt = $('a').contents().filter(function () {
    return this.nodeType === 3;
}).text();

$('elementIwantToPassTheTextTo').text(txt);

Example: http://jsfiddle.net/S95Ls/

Answer 2

If you get the html so that it includes the <span> tags you can then split on the and use everything before it.

var textIwantToUse = $(this).html().split('<span>')[0];

Answer 3

By cleaning up html tag :

var textIwantToUse = $(this).html().replace(/<span>.*<\/span>/ig, '');

Answer 4

You can do it like this to remove only inner text from span:

$(this).find('spam').html('');

This will remove text in the span element, or you can also remove entire span element if you would like it like this:

$(this).remove('span')

then do else what you like...

var textIwantToUse = $(this).text();
var textIwantToUse = $(this).html();
// or whatever you want to do with it

Answer 5

Try:

$('a').on('click', function () {
    var textIwantToUse = $(this).html();
    $('.elementIwantToPassTheTextTo').html(textIwantToUse);
    $('.elementIwantToPassTheTextTo').find("span").remove();
});

DEMO here.