jQuery exclude children from text function

Are you using the .text() jQuery function and need to exclude child elements from being displayed? Learn how to exclude the children’s text when you use .text() function by continuing the article.

<ol id='songs'>
    <li>Take A Walk<a>Passion Pit</a></li>
    <li>Call Me Maybe<a>Carly Rae Jepsen</a></li>
    <li>Somebody That I Used To Know<a>Gotye</a></li>
</ol>

Let’s say you have a list like the one above. The list contains a song and a link to the artist’s website within the same <li> element. We are unable to use jQuery’s .text() method on each <li> because it would also return the website link’s text.

You can use a function like the one below to retrieve the name of all of the songs in the list and exclude the link to their website.

function getSongs() {
    var songs = [];
    $('#songs li').each(function(){
        songs.push($(this).clone().children().remove().end().text());
    });
    return songs;
}

If you have any questions please leave a comment below.