Tips for accessing the parent of an LI element

Hey there, I've set up a drop-down menu using LI and UL tags.

For example:

<ul>

         <li><a href="#">Parent 1</a>
         <ul>
            <li id = "Child 1"><a href="#">Child 1</a></li>
            <li id = "Child 2"><a href="#">Child 2</a></li>
         </ul>
         </li>
         <li><a href="#">Parent 2</a>
         <ul>
            <li id = "Child 3"><a href="#">Child 3</a></li>
            <li id = "Child 4"><a href="#">Child 4</a></li>
         </ul>
         </li>
</ul>

I'm facing an issue where clicking on Child 1 should display Parent 1: Child 1 in the resulting div. How can I make this work?

Thanks for your help!

javascript

Answer №1

this.parentNode.getAttribute('id');

Give this a try!

where this refers to the clicked link element

thus, if the function looks like this:

function handleLinkClick(element)
{
    alert(element.parentNode.getAttribute('id') + ':' + element.innerHTML);
}

just remember to add an onclick event to your link

<a onclick="handleLinkClick(this); return false;" href="#">Child 1</a>

Answer №2

<ul>

         <li><a href="#">Category A</a>
         <ul>
            <li id = "Subcategory 1"><a href="#" onclick="alert(this.parentNode.parentNode.parentNode.firstChild.innerText + ':' + this.innerText)">Subcategory 1</a></li>
            <li id = "Subcategory 2"><a href="#">Subcategory 2</a></li>
         </ul>
         </li>
         <li><a href="#">Category B</a>
         <ul>
            <li id = "Subcategory 3"><a href="#">Subcategory 3</a></li>
            <li id = "Subcategory 4"><a href="#">Subcategory 4</a></li>
         </ul>
         </li>
</ul>

The main goal is to track the parent category when a link is clicked. In order to achieve that, we traverse up through the ul, then to the li, and finally extract the text of its first child, which represents the category label.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Plugin for Vegas Slideshow - Is there a way to postpone the beginning of the slideshow?

Is there a way to delay the start of a slideshow in JavaScript while keeping the initial background image visible for a set amount of time? I believe I can achieve this by using the setTimeout method, but I'm struggling to implement it correctly. Be ...

javascriptbackgroundslideshowdelay

Maintain authentication state in React using express-session

Struggling to maintain API login session in my React e-commerce app. Initially logged in successfully, but facing a challenge upon page refresh as the state resets and I appear as not logged in on the client-side. However, attempting to log in again trigge ...

javascriptreactjsexpresssessionredux

Is there a way in Node.js to showcase a list of choices using console log and prompt the user to input an option from the list displayed through console log?

Is there a way to use Node.js to show a list of options through the console log and prompt the user to input an option from the list via console log? Expected behavior user@desktop:~$ node test.js Option 1 Option 2 Option 3 Select an option to proceed: ...

javascriptnode.jsnpmuser-inputconsole.log

Utilizing the classList property with elements that are hidden from view

How can I use JavaScript to toggle between classes? I can't seem to understand why an element that is set to display: none; is unable to receive a class using classList. In simpler terms, if I define #div1{ width: 25%; background-color: #000000; ...

javascriptcss

Error encountered: The Bootstrap Carousel function is causing a TypeError as e[g] is not defined

I am attempting to build a dynamic bootstrap carousel using my json data, and I have implemented jQuery-Template for rendering. Essentially, I am generating the carousel slider on-the-fly from my json data with the help of jQuery-Template. Here is a snippe ...

javascriptjqueryhtmltwitter-bootstrapjquery-templates

Access your Angular 5 application as a static webpage directly in your browser, no server required!

I need to run an Angular 5 application in a browser by manually opening the index.html file without the use of a server. My client does not have access to any servers and simply wants me to provide a package (dist folder) for them to double-click on the in ...

javascriptangular

What's the source of this undefined error and is there a way to eliminate it from the code?

After successfully filtering and reducing the data, I encountered an issue with undefined. I am trying to figure out what is causing this and how I can either remove it or make it visible on the screen without being invisible. You can also check the codes ...

javascriptreactjsjson

Arrange items in a particular order

I need help sorting the object below by name. The desired order is 1)balloon 2)term 3)instalment. loanAdjustmentList = [ { "description": "Restructure Option", "name": "instalment", " ...

javascriptangular

Alert Box Displays Variable Name Instead of Label Name in Form Validation - MM_validateForm()

Looking at the screenshot, you can see variable names such as "email_address", "email_message" and "email_subject". I would like these to be displayed as "Email", "Message" and "Subject" instead. The validation in this form is done using MM_validateForm() ...

phpjavascripthtmlwebforms

Exploring the Limits with VUE Trailing Path Queries

My goal is to implement an optional query language functionality. When a user visits localhost/#/, the page should automatically redirect to localhost/#/?lang=en (defaulting to English). If the user navigates to /localhost/#/?lang=es, the site will displa ...

javascripttypescriptvue.js

What is the option for receiving automatic suggestions while formatting components in a react.js file?

When styling elements in our app using app.css or styles.css, VS Code provides auto-suggestions. For example, if we type just "back" for background color, it will suggest completions. However, this feature does not work in react.js or index.js. Why is that ...

javascripthtmlcssreactjs

The MeshBasicMaterial in THREE.js successfully renders, while the MeshLambertMaterial does not produce the desired outcome

In my current project, I've been working on creating a randomized sheet composed of arrays containing x, y, and z coordinates to draw triangles between points. You can see the outcome by clicking on this screenshot. Initially, I utilized MeshBasicMat ...

javascriptthree.js

The Material-ui DatePicker seems to be malfunctioning and as a result, the entire form is not

Struggling to get my DateTimePicker component (could be DatePicker) working after following installation instructions from various sources. I've spent a day and a half attempting to make it functional without success. If you can help me create a separ ...

javascriptreactjsmaterial-uicomponents

Issue with Electron: parent window not being recognized in dialog.showMessageBox() causing modal functionality to fail

Struggling with the basics of Electron, I can't seem to make a dialog box modal no matter what technique I try. Every attempt I make ends in failure - either the dialog box isn't modal, or it's totally empty (...and still not modal). const ...

javascriptnode.jselectron

Combining server-side and client-side routing in AngularJS: A comprehensive guide

Currently, I am in the process of transitioning a project to an Angular-based Single Page Application (SPA). The project is originally built using node/locomotivejs and serves templates from the server side. Due to its large size, we are converting it to A ...

javascriptnode.jsangularjsrouteslocomotivejs

Generate a variety of requests with Axios

I have a task where I need to send multiple Axios requests, but the number of requests can be completely random. It could range from 0 to even millions. Once all the requests are completed, I then need to perform an action, such as updating my state, which ...

javascriptreactjshttpreact-nativeaxios

Updating a SharePoint list item by retrieving a field value from a people picker field

I am attempting to update an SP.Listitem by replacing an spUser with another user using JSOM. Below is the code snippet: // Query the picker for user information. $.fn.getUserInfo2 = function () { var eleId = $(this).attr('id'); var siteUrl ...

javascriptjquerysharepointsharepoint-2013sharepoint-online

Can a single static variable be shared among all connections on the server?

I am currently working on a turn-based Chinese checkers game. I have added an onload function in the body that sends an ajax request to the server to obtain the player number for the connection. However, I am encountering an issue where the response always ...

javascriptphpajaxsymfony

Efficiently accessing and displaying nested models in AngularJS

Currently, I am in the process of developing a website that involves numerous relational links between data. For instance, users have the ability to create bookings, which will include a booker and a bookee, as well as an array of messages that can be asso ...

javascriptruby-on-railsajaxangularjsrelational-database

Despite successfully uploading files, the File Upload Progress Event is not being triggered

After browsing through several posts with similar problems, I'm at a loss for solving this issue. My AJAX file uploader is not triggering the progress event, despite the other events working correctly. The file uploads as expected, but for some reason ...

javascriptjqueryajaxxmlhttprequestjquery-events