Removing text 'Folder" from grouped items in a list

Question

I have a simple SP list grouped by folder. So my items appear with the expanded or collapsed arrow icon, the string "Folder :" and the folder name. (Example > Folder : Corporate). I have a request to remove the string "Folder :" and leave the expanded or collapsed icon and name of the folder, in this case Corporate.

This is the HTML:

<td colspan="100" nowrap="nowrap" class="ms-gb">
     <a href="javascript:" onclick="javascript:ExpCollGroup('38-1_', 'img_38-1_',event, false);return false;">
         <span class="ms-commentcollapse-iconouter" style="display: none;">
              <img class="ms-commentcollapse-icon" src="/_layouts/15/images/spcommon.png?rev=23" alt="collapse" id="img_38-1_">
         </span>
         "Folder"
         </a> 
         ": Corporate" 
         <span style="font-weight: lighter; display: none;">(25)</span>
</td>

I've tried to use the following jQuery:

$("td.ms-gb a").each(function() {
    var url = $(this).text(); 
    url = url.replace("Folder", " ");
    $(this).text(url);
});

But that removes the expanded or collapsed icon as well. I feel like I'm missing something simple, is there an easy way to do this?

Answer 1

This happens due to the line:

$(this).text(url);

that replaces

<span class="ms-commentcollapse-iconouter" style="display: none;">
   <img class="ms-commentcollapse-icon" src="/_layouts/15/images/spcommon.png?rev=23" alt="collapse" id="img_38-1_">
</span>
"Folder"

with

" "

So, it means the inner html is not preserved.

Solution 1

$("td.ms-gb a").each(function() {
    var iconHtml = $(this).html(); 
    iconHtml = iconHtml.replace("Folder", " ");
    $(this).html(iconHtml);
});

Solution 2

$("td.ms-gb a").each(function() {
    var $iconouter = $(this).find('span');
    $(this).html(' ');
    $(this).prepend($iconouter);
});