How to display only certain text within a div?

Question

I'm using blogger to create posts and the post layout is as follows:

Post Title

Labels

Content

Author

When creating a post with multiple labels they will show like this for example:

Labels: Alternative, New Music, Imagine Dragons

My question is, how could I go about displaying only the "Genre" in this case "Alternative" so it would display like this:

Labels: Alternative

Blogger doesn't support php so this would have to be done i believe with JavaScript/jQuery where I could filter the text inside the labels div. However I'm not very skilled with that.

UPDATE MANY THANKS TO Chirag64 FOR THIS! Anyone using blogger will find this very useful in selecting certain labels to display on your posts.

Final product can be viewed here:

jsfiddle.net/3apZ4/13/

Answer 1

You can use the following JavaScript code to remove the other genres except for the first one.

//Remove genres not matching the listOfGenres list
var labels = document.querySelectorAll(".post-labels a");
var listOfGenres = ["Alternative","Pop"];

for (i=0; i < labels.length; i++) {
    if (listOfGenres.indexOf(labels[i].textContent) == -1)
        labels[i].remove();
}

//Remove trailing commas.
var postLabels = document.querySelector(".post-labels");
postLabels.innerHTML = postLabels.innerHTML.replace(/\,/g, "");

Working JSFiddle.

Answer 2

You can do it using css and jquery.

1) First separate each labels with seperate div's

2)Create a style for a class in css like

    .hidden-class
    {
        display:none;
    }

In jquery,on some condition add the hidden-class to the div.

      $( "id" ).addClass( "hidden-class" );

if you want to remove

      $( "id" ).removeClass( "hidden-class" );

in javascript To add

        document.getElementById('id').className += 'hidden-class'

To remove

       document.getElementById("id").className = document.getElementById("id").className.replace(/\bhidden-class\b/,'');