[X] added to webpart having identical titles

Ever had to create a page in a Sharepoint site where the title or the header of webparts are identical. In order to distinguish them, Sharepoint appends [X] to the title. Thus if you add three Content by Query webparts to your page, by default they will be rendered as Content Query Web Part ‭[1]‬, Content Query Web Part ‭[2]‬ and Content Query Web Part ‭[3]‬. Normally you would configure the webpart properties and give them distinct names. Not in this case though since I had to make something of a gateway page to three subs sites. Three images on the page each provide links to the internal sites with the webparts under them. Image on the left would link to the first site and the webpart under it would show a news list on that particular site. Similarly with the other two images and the webparts. I can't provide the screenshot but this is how the page looked.



The requirement was to have all three webpart titles to be "News Update". But adding the webparts to the page predictably resulted in this.



I dont know if there is a better way to solve my problem, but I found that with a little bit of client scripting I could solve it. In a way this solution is similiar to the one I posted on CSS Customization of Webparts. Each webpart title on the page is assigned an internal id by sharepoint which I use to identify the webpart title. Having identified them, I replace the [x] with a blank.

This is how the code would look like.

<script language="JavaScript" type="text/javascript">
//For my first webpart
var content = document.getElementById("WebPartTitleWPQ2").innerHTML;
document.getElementById("WebPartTitleWPQ2").innerHTML = content.replace('[1]','');
//For my second webpart
content = document.getElementById("WebPartTitleWPQ3").innerHTML;
document.getElementById("WebPartTitleWPQ3").innerHTML = content.replace('[2]','');
//For my third webpart
content = document.getElementById("WebPartTitleWPQ4").innerHTML;
document.getElementById("WebPartTitleWPQ4").innerHTML = content.replace('[3]','');
</script>

and my webparts will then look like