On an html page, I want to dynamically draw elements and I want to determine the data-id the nearest element li that contains the clicked element a, and then add a class to the element with the li with data-id so that the element is highlighted as active:

<form onclick={handleClickVerticalNavigation}>
<nav class="slds-nav-vertical" aria-label="Sub page">
    <div class="slds-nav-vertical__section">
        <h2 id="entity-header" class="slds-nav-vertical__title">Months</h2>
        <div for:each={listMonth} for:item="month" key={month.Id}>
            <ul aria-describedby="entity-header">
            <li class="slds-nav-vertical__item" id={month.Id} data-id={month.Id}>
                <a href="#" class="slds-nav-vertical__action" aria-current="false">{month.nameMonth}
                <span class="slds-badge slds-col_bump-left">
                    <span class="slds-assistive-text">:</span>{month.countAmount}
                    <span class="slds-assistive-text">New Items</span>
                <span class="slds-badge slds-col_bump-left">
                    <span class="slds-assistive-text">:</span>{month.countIncome}
                    <span class="slds-assistive-text">New Items</span>

enter image description here

the transmitted listMonth looks like this:


I have experimented a lot with the handler method, and this is how it looks now:

    let returnTarget = event.target;
    if (returnTarget.tagName != 'li'){
        let returnId = event.target.id;
    } else {
        console.log('click not on li');

I get into the if block and nothing else happens, because I don't get the id and the class can't be set either...

I have seen this question and some others, but have not solved my problem...


1 Answer 1


Your click event will capture the A anchor tag, so you will have to navigate back to li tag and then get the id.

like this : e.target.closest('li').id

Your click event navigate to closest parent li tag and get the id, as the html has id on li tag.

<li class="slds-nav-vertical__item" id={month.Id} data-id={month.Id}>


You can use queryselector like this:

let returnId = event.target.closest('li').getAttribute('data-id');
  • Thank you very much! Now I get the id, only for some reason it is slightly changed... For example, instead of 0-January, I get 0-January-45. -45 is always added to each id. Commented Jul 16, 2021 at 14:45
  • @Nagedra I decided to get the date-id and now I get the correct value.: let returnDateId = event.target.closest('li').getAttribute('date-id');. But there is a problem with installing the class. That's how I'm trying to install it: this.template.querySelector('li[date-id="${returnDateId}"]').className='slds-is-active';. And I can't do it... Commented Jul 16, 2021 at 15:26
  • @uniqueuser Updated the code. Commented Jul 16, 2021 at 17:05
  • @unique user, id's are changed on runtime, you should never set or use id's to access the DOM using querySelectors, us a custom attribute instead
    – glls
    Commented Jul 16, 2021 at 17:13
  • @Nagedra Singh, thank you so much for your help! This solved my problem. Commented Jul 17, 2021 at 17:18

Not the answer you're looking for? Browse other questions tagged .