Melody Scott
asked on
Jquery remove certain link from page and/or remove text
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!
Partway down the page it says Build your own Package or Add to your Order: and that links to /menu/thanksgiving/900000.
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!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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??
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??
ASKER
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.
ASKER
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.
ASKER
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.
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:
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
$(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!")
}
});
});
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
ASKER
Sorry about that, I guess the boss changed the password again. Attached is the full page html.
thanksgiving.html
thanksgiving.html
ASKER
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/90 0000.html" ]').each(f unction() {
//remove link
$(this).removeAttr('href') ;
//find Full description
if ($(this).find('i').text() === "Full description...") {
$(this).find('i').text("So mething else!")
}
});
});
</script>
</head>
<script type="text/javascript" language="javascript">
$(document).ready(function
//remove link
$('a[href="thanksgiving/90
//remove link
$(this).removeAttr('href')
//find Full description
if ($(this).find('i').text() === "Full description...") {
$(this).find('i').text("So
}
});
});
</script>
</head>
I can't access the link because FF blocks it. And I'm not comfortable with logging in to your site.
ASKER
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
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.
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.
ASKER
<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.j pg" 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.
<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
</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.
ASKER
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.j pg" 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">Buil d 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>
<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.
<img src="/img/prod/thumbs/more
</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.
</span>
<p>
<a href="thanksgiving/900000.
<i class="hidden-print">Full description...</i>
</a>
</p>
<div class="spnIcons"> </div>
</div>
</div>
So the problem is that your dev site doesn't have the href attribute on the link:
dev:
compared to production:
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:
Here is an updated Fiddle Demo
dev:
<a>Build your own Package or Add to your Order:</a>
compared to production:
<a href="thanksgiving/900000.html">Build your own Package or Add to your Order:</a>
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!")
}
});
});
Here is an updated Fiddle Demo
ASKER
This is a great solution, exactly what I needed, thanks!
ASKER