Solved

Jquery remove certain link from page and/or remove text

Posted on 2016-10-06
17
28 Views
Last Modified: 2016-10-07
HI, This page is dynamically created: http://www.magickitchen.com/menu/thanksgiving.html

Partway down the page it says Build your own Package or Add to your Order: and that links to /menu/thanksgiving/900000.html.

Can I use jquery to disable that link?

This second question I am quite sure can't be done, but I'll ask. I'd like the words Full Description below that to be removed, but I want all the other ones on the page to remain. Products may come and go, so we can't say take away the third child of...

I'll leave that to your brains. Thanks!
0
Comment
Question by:mel200
  • 11
  • 6
17 Comments
 
LVL 42

Accepted Solution

by:
zephyr_hex earned 500 total points
ID: 41832764
There are actually two elements on that page that use that link.  I'm assuming you want to disable both.

  //remove link
  $('a[href="thanksgiving/900000.html"]').each(function() {
    //remove link
    $(this).removeAttr('href');
    //find Full description
    if ($(this).find('i').text() === "Full description...") {
      $(this).find('i').text("Something else!")
    }
  });

Open in new window


The above needs to be wrapped inside document ready.

Here is a Fiddle Demo which uses a button click to trigger the change so you can see the before / after result.
1
 

Author Comment

by:mel200
ID: 41832773
Oh, that will work perfectly, thanks! I'll try it out on my test site. I'm just learning jquery, it's pretty amazing.
0
 

Author Comment

by:mel200
ID: 41832783
Ok, I added it before the </head> tag here:

https://dev2.magickitchen.com/menu/thanksgiving.html

You can log in using:
userid:  pepe
pass:    BobTheBuilder45!!

It's not working as yet, but I may have wrapped it incorrectly??
0
 

Author Comment

by:mel200
ID: 41833819
Hi, Again. OK, I made some changes. I rushed it yesterday and did something dumb. Now the link is gone, which is fantastic. But the words full description are not changing. I'll work with it, but if you have time to help, please see link above. Thanks.
0
 

Author Comment

by:mel200
ID: 41833844
Ok.. it runs in the fiddle if I take away the button. So that means something else is blocking it? Or some jquery runs before it that supercedes it? I'll try moving it up.
0
 

Author Comment

by:mel200
ID: 41833857
No.. I've moved it as high as I can go and still stay below the jquery load. I'm out of ideas for now. Please help if you can. Thanks.
0
 
LVL 42

Expert Comment

by:zephyr_hex
ID: 41833865
Firefox is blocking me from your dev site.  You should be able to use the code I posted here at EE, but wrapped inside document ready:
$(document).ready(function() {
    $('a[href="thanksgiving/900000.html"]').each(function() {
    //remove link
    $(this).removeAttr('href');
    //find Full description
    if ($(this).find('i').text() === "Full description...") {
      $(this).find('i').text("Something else!")
    }
  });
});

Open in new window


The code that removes the Full description text is dependent on the HTML structure being the same as your production website.  If you still can't get it working, please post the jQuery you're using, along with the HTML from your dev site for the segment in question
0
 

Author Comment

by:mel200
ID: 41833890
Sorry about that, I guess the boss changed the password again. Attached is the full page html.
thanksgiving.html
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 42

Expert Comment

by:zephyr_hex
ID: 41833898
It should go just above the </head> tag.  Inside script tags and wrapped in document ready, like so:

img
0
 

Author Comment

by:mel200
ID: 41833917
That's exactly what I had, and I have replaced it now by the </head> tag. Not working. Let me get you access. Are you not allowed using the user name and password above? Thanks.
<script type="text/javascript" language="javascript">
  $(document).ready(function() {
   //remove link
  $('a[href="thanksgiving/900000.html"]').each(function() {
    //remove link
    $(this).removeAttr('href');
    //find Full description
    if ($(this).find('i').text() === "Full description...") {
      $(this).find('i').text("Something else!")
    }
  });
  });
  </script>
</head>
0
 
LVL 42

Expert Comment

by:zephyr_hex
ID: 41833950
I can't access the link because FF blocks it.  And I'm not comfortable with logging in to your site.
0
 

Author Comment

by:mel200
ID: 41833970
ok... I will see if I can show it to you some other way.  Maybe I can build a false category on the live site for a short time. Here is the html currently.thanksgiving-2.html
0
 
LVL 42

Expert Comment

by:zephyr_hex
ID: 41834056
Bring up your dev page in a web browser.  Press F12 and go to the tab that shows the HTML.  Find the section with the links and "full description" text, and paste that here.  For an example, refer to the HTML section of the Fiddle Demo I posted earlier.  I copied that from your production site using F12 developer tools (I just found that section in the HTML, highlighted it and copied it)

If the jQuery that disables the link is working, then you have the code in the right place.  If it's not changing "Full description" it suggests that text is not in the same placement in the HTML as it is on your production site.
0
 

Author Comment

by:mel200
ID: 41834218
<div class="hidden-lg hidden-md">
<hr>
</div>
<div class="row mainCoursesRow">
<div class="col-lg-3 col-md-4 col-sm-12 col-xs-12" style="margin-right:-5px;">
<div class="coursesImage">
<a>
<img src="/img/prod/thumbs/more-choices.jpg" alt="Build your own Package or Add to your Order:">
</a>
</div>
</div>
<div class="col-lg-5 col-md-6 col-sm-12 col-xs-12 vSmall" style="margin-right:-5px;">
<div class="coursesContents">
<span class="ItemTitle">
<a>Build your own Package or Add to your Order:</a>
</span>
<p>
<a>
<i class="hidden-print">Full description...</i>
</a>
</p>
<div class="spnIcons"> </div>
</div>
</div>

I'll check the live site.
0
 

Author Comment

by:mel200
ID: 41834227
Here's the live site. I don't see it...

<hr>
</div>
<div class="row mainCoursesRow">
<div class="col-lg-3 col-md-4 col-sm-12 col-xs-12" style="margin-right:-5px;">
<div class="coursesImage">
<a href="thanksgiving/900000.html">
<img src="/img/prod/thumbs/more-choices.jpg" alt="Build your own Package or Add to your Order:">
</a>
</div>
</div>
<div class="col-lg-5 col-md-6 col-sm-12 col-xs-12 vSmall" style="margin-right:-5px;">
<div class="coursesContents">
<span class="ItemTitle">
<a href="thanksgiving/900000.html">Build your own Package or Add to your Order:</a>
</span>
<p>
<a href="thanksgiving/900000.html">
<i class="hidden-print">Full description...</i>
</a>
</p>
<div class="spnIcons"> </div>
</div>
</div>
0
 
LVL 42

Expert Comment

by:zephyr_hex
ID: 41834484
So the problem is that your dev site doesn't have the href attribute on the link:

dev:
<a>Build your own Package or Add to your Order:</a>

Open in new window


compared to production:
<a href="thanksgiving/900000.html">Build your own Package or Add to your Order:</a>

Open in new window


That href attribute is what's being used to locate the "Full description" text in the original jQuery I posted.

If you don't want to add that href attribute back to the link, you can just use this jQuery to change the "Full description" text:

$(document).ready(function() {
	$('.hidden-print').each(function() {
		  //find Full description
		  if ($(this).text() === "Full description...") {
			$(this).text("Something else!")
		  }
	});
});

Open in new window


Here is an updated Fiddle Demo
1
 

Author Closing Comment

by:mel200
ID: 41834487
This is a great solution, exactly what I needed, thanks!
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now