Below is a snippet of HTML code that needs to be modified:
<td class="targetTD">
<a href="http://foo.com">
<span>content</span>
</a>
**Text I want to modify**
<span>more content</span>
</td>
The targetTD class appears multiple times depending on the content being rendered. For each instance, there is a need to remove the substring ": " from the beginning of the text block. This substring is not within its own element and cannot be wrapped in an id/class. Trying out some JavaScript solution resulted in a console error:
Unable to get property 'replace' of undefined or null reference.
Solution Update
The following script provided by @Vaibhav resolved the issue:
<script type="text/javascript">
$(function() {
$('.targetTD').each(function () {
$(this).html($(this).html().replace(/\:\s/g, ''));
});
});
</script>
Update 1
A fix suggested by @BenM helped eliminate the error message:
<script>
$(function() {
$('.targetTD').html(function() { $(this).html().replace(': ', ''); });
});
</script>
Even though the above modification prevented the error, it did not successfully remove the ": " from the text block. Any insights into why this might be happening?
Update 2
In addressing a comment from @ElvisLikeBear, here are some SharePoint specific details:
The objective is to hide the column name in a grouped list. In SP2010, this was achieved by hiding the ms-gb class. However, in SP2013, the expand/collapse button is also associated with this class making wholesale hiding unfeasible. The span containing the column name has been successfully hidden (as mentioned in the code above), but the ": " still remains in the text block at the start of each category name.
The code is being implemented at the page level as a snippet using the Script Editor web part.