Getting text from inside P element, not including span tag in selection

Question

How do I remove the span element from the selection in order to get just the text in the P tag, and not include the span tag or its contents?

<p><span class="title visible-xs-inline">Description: </span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

I have tried using .not(), but that doesn't work in this case.

var theValue = $(this).parents().find('p').not('.title').text();

Answer 1

Due to the HTML structure you would need to retrieve the textNode itself. Try this:

var text = $('p').contents().last()[0].nodeValue;

Example fiddle

Answer 2

This answer provides an excellent example. Just clone the element in memory and remove its children, then call .text() .

 $('button').click(function() { var text = $("p") .clone() //clone the element .children() //select all the children .remove() //remove all the children .end() //again go back to selected element .text(); alert(text); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p><span class="title visible-xs-inline">Description: </span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <button>Get P Text Not Including Span</button>