CODEWITHSUNDEEP
jquery
MShack
MShack

Reputation: 652

remove link and a portion of text

How can i remove a portion of this below

<h3 class="h3-menu">Display: This Month | <a href="//mysite.com">Full Season</a> | <a href="//mysite1.com">ICS File Export</a></h3>

Result would be this

<h3 class="h3-menu">Display: This Month | <a href="//mysite1.com">ICS File Export</a></h3>

Need this portion removed

| <a href="//mysite.com">Full Season</a>

The URL path for the links are always changing , so am unable to use url strings

Upvotes: 0

Views: 43

Answers (3)

Carsten Massmann
Carsten Massmann

Reputation: 28196

This is a fiddle demonstrating @Caramba's solution:

var h3=document.querySelector('h3'), 
arr=h3.innerHTML.split('|');
arr.splice(1,1);
h3.innerHTML=arr.join('|');
<h3 class="h3-menu">Display: This Month | <a href="//mysite.com">Full Season</a> | <a href="//mysite1.com">ICS File Export</a></h3>

I didn't use jQuery, as it is not really needed here.

Should there be several places where you need to do this operation then you can do it like this:

document.querySelector('#go').addEventListener('click',function(){
 Array.from(document.querySelectorAll('h3')).forEach(
  function(h3){
   var arr=h3.innerHTML.split('|');
   arr.splice(1,1);
   h3.innerHTML=arr.join('|');
 });
});
<h3 class="h3-menu">Display 1: This Month | <a href="//mysite.com?itm=1">Full Season</a> | <a href="//mysite1.com?itm=1">ICS File Export</a></h3>
<h3 class="h3-menu">Display 2: This Month | <a href="//mysite.com?itm=2">Full Season</a> | <a href="//mysite1.com?itm=2">ICS File Export</a></h3>
<h3 class="h3-menu">Display 3: This Month | <a href="//mysite.com?itm=3">Full Season</a> | <a href="//mysite1.com?itm=3">ICS File Export</a></h3>
<h3 class="h3-menu">Display 4: This Month | <a href="//mysite.com?itm=4">Full Season</a> | <a href="//mysite1.com?itm=4">ICS File Export</a></h3>
<button id="go">click me to cut off the unwanted portions above</button>

To visualise the "before and after" effect I added a button at the bottom. incidentally, if you click it again, another part of your links would be removed. To prevent that from happening you could add an option to your addEventListener() call:

document.querySelector('#go').addEventListener('click',function(){
  // function code, as above ...
}, { once: true });  // this will de-activate the listener after the first click

Upvotes: 0

caramba
caramba

Reputation: 22480

One of the 5'000'000 options is to use split to get an array and then concatenate the array values back together skipping the middle value [1]

var element = document.querySelector('h3');
var stringArray = element.innerHTML.split('|');
// stringArray looks now like:
// [
//    "<h3 class=\"h3-menu\">Display: This Month ",
//    " <a href=\"//mysite.com\">Full Season</a> ",
//    " <a href=\"//mysite1.com\">ICS File Export</a></h3>"
// ]

element.innerHTML = stringArray[0] + '|' + stringArray[2];
<h3 class="h3-menu">Display: This Month | <a href="//mysite.com">Full Season</a> | <a href="//mysite1.com">ICS File Export</a></h3>

Upvotes: 2

AmirBll
AmirBll

Reputation: 1119

you can try this:

var url = $('a:contains("Full Season")');
url.remove();

var h3Text = $('h3:contains(" | ")').html();

$('.h3-menu').html(h3Text.replace('|  ', ''));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h3 class="h3-menu">Display: This Month | <a href="//mysite.com">Full Season</a> | <a href="//mysite1.com">ICS File Export</a></h3>

Upvotes: 0

Related Questions