Modifying grouped list headers

I love the coding solutions, they are great.
Love it! Loading a 90 KB jQuery library to do something.

Here is your grouped header HTML:

 since that <span> has a display inline style, you can't overrule it with display:none

But one line of CSS can hide it:

``

``

Put it in a CEWP on the ListView page, between <style> tags

But coding solutions are great, they really are! 

Your second requirement requires scripting because you want to move DOM elements. You want to move the label inside the A tag

![]()

But no need for jQuery, vanilla JavaScript can do that:

    var groupedAs=document.querySelectorAll("tbody[id^='titl'] a");
    //iterate Nodelist as Array
    [].forEach.call( groupedAs , function(A) {
        if(A.nextSibling){ // change this DOM element once when there is a label
            A.firstChild.nextSibling.remove(); // remove fieldname label
            var value=A.appendChild(A.nextSibling); // move label inside A tag
            value.nodeValue=value.nodeValue.split(' : ')[1]; // remove colon
            A.nextElementSibling.remove(); // remove counter after A
        } else {
            console.warn('ran code twice')
        }
    });