How to remove text specific text within link

Question

I am trying to remove the  Title text from my link while keeping the image.

<tr id="group0">
    <td colspan="100" nowrap="" class="ms-gb">
        <a href="javascript:" onclick="javascript:ExpCollGroup('28-1_', 'img_28-1_',event, false);return false;">
            <img src="/_layouts/15/images/minus.gif" border="0" alt="collapse" id="img_28-1_">
            &nbsp;Title
        </a>
        : How do I access SharePoint settings?
    </td>
</tr>

The issue I am facing is this is from a SharePoint site where I don't have much control of the HTML set up before hand, I can only modify it after the page is generated using JQuery. There are about 20 different instances of this code repeated down the page, but each instance has its own img id referenced in both the <a> tag as well as the <img> tag that must remain unique, so my attempt to do something along the lines of:

$('.ms-gb a').contents().filter(function() {
    return this.nodeType == 3;
}).text();

returns all 20 instances of the " Title". I was thinking of possibly using Jquery to grab the html within the <a> tag and then to use string splicing to remvoe the last 11 characters but that doesn't seem to be successful so far.

https://stackoverflow.com/a/11633703/3407923 – myfunkyside Jul 21 '17 at 19:42 — myfunkyside, Jul 21 '17 at 19:42

Rory McCrossan · Accepted Answer · 2017-07-21T19:52:27.807

To remove it you can get the contents(), then call remove() on the last item in the resulting collection. Try this:

var contents = $('.ms-gb a').contents();
contents[contents.length -1].remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr id="group0">
    <td colspan="100" nowrap="" class="ms-gb">
      <a href="javascript:" onclick="javascript:ExpCollGroup('28-1_', 'img_28-1_',event, false);return false;">
        <img src="/_layouts/15/images/minus.gif" border="0" alt="collapse" id="img_28-1_"> &nbsp;Title
      </a>
      : How do I access SharePoint settings?
    </td>
  </tr>
</table>

Also just as a side note, putting JS code in href or on* attributes isn't great practice. You should look in to using unobtrusive event handlers. I realise you're using Sharepoint though, so depending on how the page is built your hands may be tied.

Unfortuantely ,due to the repition of the the .ms-gb a throughout the document trying to select it with contents gives me a set of 50

In that case you could loop through all the .ms-gb a elements individually, like this:

$('.ms-gb a').each(function() {
  var contents = $(this).contents();
   contents[contents.length -1].remove();
});

Unfortuantely ,due to the repition of the the .ms-gb a throughout the document trying to select it with contents gives me a set of 50 that alternate between "img#img19-1", then text, then another img, then another text. Is there a way to remove all odd indexed entries from the set? — RipIt, Jul 21 '17 at 19:21
I managed to use this but changed the remove to a for loop: `for (i = 1; i < contents.length; i+= 2) { contents[i].remove(); }` — RipIt, Jul 21 '17 at 19:31
Glad to help. I edited the question with a slightly more robust solution for your loop issue. — Rory McCrossan, Jul 21 '17 at 19:52

score 0 · Answer 2 · answered Jul 21 '17 at 19:26

Try:

$('.ms-gb a').each(function(){
   var img = [];
   $(this).find(img).each(function(){
       img.push($(this)); 
   });
   if(img.length>0){
      $(this).html("");
      for(i in img){
          i.appendTo($(this));
      }
   }
});

Running this should leave you with the links with images, stripped of any other element.

score 0 · Answer 3 · answered Jul 21 '17 at 19:33

$('.ms-gb a').each(function(){
 this.lastChild.remove();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr id="group0">
    <td colspan="100" nowrap="" class="ms-gb">
        <a href="javascript:" onclick="javascript:ExpCollGroup('28-1_', 'img_28-1_',event, false);return false;">
            <img src="/_layouts/15/images/minus.gif" border="0" alt="collapse" id="img_28-1_">
            &nbsp;Title
        </a>
        : How do I access SharePoint settings?
    </td>
</tr>
<tr id="group1">
    <td colspan="100" nowrap="" class="ms-gb">
        <a href="javascript:" onclick="javascript:ExpCollGroup('28-1_', 'img_28-1_',event, false);return false;">
            <img src="/_layouts/15/images/minus.gif" border="0" alt="collapse" id="img_28-1_">
            &nbsp;Title
        </a>
        : How do I access SharePoint settings?
    </td>
</tr>
</table>

you can get all element by $('.ms-gb a') and remove that lastChild by calling lastChild.remove(); it will remove that text.

How to remove text specific text within link

3 Answers3