Develop Reference

How to disable first link in dropdown menu (js)

I have a menu in my CMS which is controlled programatically and I don't have access to the code, the only thing I can add is js/jquery. I would like to disable the first element from the menu, ie replace the current href with #. I'm new to jquery and need some help. Here's a menu sample.
<nav class="main-nav">
<div class="shell">
<ul>
<li class="taphover">
Education & Training<i class="ico-arrow"></i>
<div class="dd">
<ul>
<li>Book a Field Trip</li>
<li>Educator Development</li>
<li>Specialized Student Programs
</li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
I'd like to replace /education with #. Any ideas?

//select the first anchor where href="/education"
var anchor = $("a[href='/education']")[0];
//change the href of the anchor
anchor.attr('href') = "#";

Seeking a selector for child elements in dom scrape

I am unable to change any html on the website in question.
Here is some html:
<ul id="utility-menu" class="menu menu--primary">
<li><a class="" href="https://www.example.com/newsstand" target="_blank">Magazines</a></li>
<li><a class="" href="https://secure.bla.com/example/promo/GiveAGift/" target="_blank">Gifts</a></li>
<li>
Français
</li>
<li><a class="" href="/signin">Sign In</a></li>
<li>
<div class="i-am-canadian">
<img alt="Canadian flag" height="23px;" src="https://secure.example.com/assets/images/icons/ui/i-canadian-c8a132ad64588dcc0b2e61cc589dfef3.png" width="40px;">
</div>
</li>
</ul>
I managed to select the menu using:
document.querySelectorAll('.menu--primary')[0]
The element I'm interested in is:
Français
This element i a language selection for the site visitor that will be either "English" or "Français".
If the user is on an English language page the value of the element will be that shown. But if they are on the French language equivalent the element will be English
I would like a selector that returns either "English" or "Français".
How would I do that?

Answer:
var el = document.querySelector('#utility-menu a[href^="/email_check?lang="').textContent;
It will select first a element with attribute href begining with /email_check?lang= in #utility-menu. Probably you can .trim() text to get rid of whitespaces.

If your html is not going to change much, you can use
var test = document.querySelector("ul > li > a[href='/email_check?lang=fr']");
console.log(test.textContent); // Français
https://jsfiddle.net/u4vjq8ah/

Javascript variable setting - list items

I have this menu and I want to set one variable for each li item, and alert with it's text when clicked. This was easy, I solved for this with the script below.
$("ul#menudropd .animal li a").click(function() {
var whatever = $(this).text();
alert(whatever); });
Now, I also need to include the 'parent' (ie, the text in the mainlinks class) in the alert. The parent is usually never clicked, only hovered over to display the children. But, it is text so it should be easy right?
Example:
Currently, you click on "Puppy" and alert says "Puppy". I need to say "Dog : Puppy". Same for the next section. Click on "Kitten" I need the alert to come back as "Cat: Kitten".
I know how to have the alert display both once I get that 2nd variable set, I just can't figure out how to do it without clicking it. Any ideas?
<ul id="menudropdown">
<li class="mainlinks"> Dog
<div class="animal dog">
<li> Puppy </li>
<li> Pup </li>
</div>
</li>
<li class="mainlinks"> Cat
<div class="animal cat">
<li> Kitty </li>
<li> Kitten </li>
</div>
</li>
</ul>

Use closest() and you may also want ul instead of div, the html you have seems invalid as div directly contain li element.
The HTML List item element (<li>) is used to represent a list item. It
should be contained in an ordered list (), an unordered list
() or a menu (), reference.
Live Demo
Html
<ul id="menudropdown">
<li class="mainlinks"> Dog
<ul class="animal dog">
<li> Puppy
</li>
<li> Pup
</li>
</ul>
</li>
<li class="mainlinks"> Cat
<ul class="animal cat">
<li> Kitty
</li>
<li> Kitten
</li>
</ul>
</li>
</ul>
Javascript
$("ul#menudropdown .animal li a").click(function () {
alert($(this).closest('.mainlinks').find('a:first').text());
});

You should find the closest li tag with your mainlinks class and then select the text of the first child.
Like this:
$(this).child().first().text()+" : "+$(this).text();

How to remove existing menu items

I created menu using fg.menu.js once its loaded I want to remove the unwanted menu for which user dont have access.
for eg:-
<ul>
<li> menu1
<ul>
<li id="8000610">Test1
</li>
<li id="20247">Test2
</li>
<li id="8000526">Test3
</li>
</ul>
</li>
</ul>
Now after loading the menu I want to remove the Test2
Thanks in advance

If you use jQuery, it's as simple as $('#20247').remove();
With vanilla JS it's
element = document.getElementById("element-id");
element.parentNode.removeChild(element);
Also, use search.

How to expand an unordered list down to a certain link

I have a dynamically built unordered list like below, and I want to find a way to expand all the nodes above the link with a certain id once the list is loaded using jquery,
For example I might want to expand all the nodes required for the link with the id=1905 to be visiblem and leave all other nodes collapsed.
Hope this makes sense.
<div id="menu">
<ul>
<li><a class="inactive" href="#"><img src="images/folder.png">Baking</a>
<ul>
<li><a class="inactive" href="#">Bars</a>
<ul>
<li><a id="1905" class="rlink" href="url">Rasberry Crumb Breakfast Bars</a></li>
</ul>
</li>
</ul>
</li>
<li><a id="1803" class="rlink" href="url">text</a></li>
</ul>
</div>
So the list would initially load like this
And I would want to expand it like this

You could try going up the parent nodes of the element you want and activate them:
var parentList= $('#link1905').closest('ul');
while (parentList.length > 0) {
parentList.prev('a').removeClass('inactive'); /* and/or .addClass('active'); */
parentList = parentList.closest('ul');
}
Also you must start your element id's with a letter: What are valid values for the id attribute in HTML?