title: Dropdown menu click eventListener producing a different target element based on area clicked
body: <p>I have a MaterializeCSS dropdown menu implemented with this HTML. The event listener works only if the dropdown item is clicked in the upper portion.</p>
  
  <pre><code>
      &lt;div class="left"&gt;
        &lt;span id="notificationTotal" class="new badge red" style="display:none"&gt; 
        &lt;/span&gt;
          &lt;a class="dropdown-trigger" href="#!" data-target="notificationsDropdown"&gt;
            &lt;i class="material-icons"&gt; message&lt;/i&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;ul id="notificationsDropdown" class="dropdown-content"&gt;
      &lt;/ul&gt;
  
  </code></pre>
  
  <p>I'm using the following Javascript to populate the menu with notifications. This is working just fine.</p>
  
  <pre><code>    // Reset Notification Dropdown
      notificationsDropdown.innerHTML = '';
  
      notifications.forEach(notif =&gt; {
        const displayTime = moment(notif.date).fromNow();
        let typeIcon = 'sms';
        if (notif.type === 'chat') {
          typeIcon = 'lock';
        }
  
        notificationsDropdown.innerHTML += `&lt;li class="notification"&gt;
        &lt;a style="margin-top:0px;margin-bottom:0px;padding-bottom: 0;font-size:14px" href="#" class="blue-text"&gt;
        &lt;span class="js-patientName"&gt;
        ${notif.contact.firstName} ${notif.contact.lastName}&lt;/span&gt;
        &lt;span class="js-notificationPhone" style="display:none"&gt;${
          notif.contact.phone
        }&lt;/span&gt;
        &lt;span class="js-patientId" style="display:none"&gt;${
          notif.patientId
        }&lt;/span&gt;
        &lt;span class="js-patientDOB" style="display:none"&gt;${
          notif.contact.birthDate
        }&lt;/span&gt;
        &lt;p style="margin-top:0px;margin-bottom:0px;padding-bottom: 0;padding-top: 0;"&gt;
          &lt;i style="display: inline-flex; vertical-align:middle" class="tiny material-icons"&gt;${typeIcon}&lt;/i&gt;
          &lt;span class="black-text" style="font-size:12px"&gt;
          ${displayTime}
          &lt;/span&gt;
        &lt;/p&gt;
        &lt;/a&gt;&lt;/li&gt;`;
      });
      notificationsDropdown.innerHTML += `&lt;li class="divider" class="blue-text"&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="/notifications" class="blue-text"&gt;See All Notifications&lt;/a&gt;&lt;/li&gt;`;
    }
  </code></pre>
  
  <p>The dropdown gets populated and when a user clicks on a particular dropdown .li entry depending on the exact location they click, it may or not work. The user must click at the main top of the dropdown item.</p>
  
  <p>This is the event listener code that extracts the values from the hidden span elements.</p>
  
  <pre><code>  document
      .querySelectorAll('#notificationsDropdown', '.li .a .notification')
      .forEach(input =&gt;
        input.addEventListener('click', async e =&gt; {
          // console.log('clicked', e.target);
  
          console.log(e.target.parentNode);
  
          const name = e.target.children[0].textContent.trim();
          const phone = e.target.children[1].textContent.trim();
          const patientId = e.target.children[2].textContent.trim();
          const birthDate = e.target.children[3].textContent.trim();
          console.log('patientid ', patientId);
  
          const patient = {
            name,
            patientId,
            phone,
            birthDate
          };
  </code></pre>
  
  <p>Is there a way I can rewrite the eventListener code to resolve this issue? Possibly instead of using e.target.children[insert_number_here].textContent I could use .closest('js-patientId') or similar ?</p>
  
  <p>This is how the HTML is rendered to the page. This is an example of a single notification:</p>
  
  <pre><code>&lt;ul
    id="notificationsDropdown"
    class="dropdown-content"
    tabindex="0"
    style="display: block; width: 177.297px; left: 1648.7px; top: 0px; height: 251px; transform-origin: 100% 0px; opacity: 1; transform: scaleX(1) scaleY(1);"
  &gt;
    &lt;li class="notification"&gt;
      &lt;a
        style="margin-top:0px;margin-bottom:0px;padding-bottom: 0;font-size:14px"
        href="#"
        class="blue-text"
      &gt;
        &lt;span class="js-patientName"&gt;ANDREW TAYLOR&lt;/span&gt;
        &lt;span class="js-notificationPhone" style="display:none"&gt;
          5555551212
        &lt;/span&gt;
        &lt;span class="js-patientId" style="display:none"&gt;
          1
        &lt;/span&gt;
        &lt;span class="js-patientDOB" style="display:none"&gt;
          1960-01-01
        &lt;/span&gt;
        &lt;p style="margin-top:0px;margin-bottom:0px;padding-bottom: 0;padding-top: 0;"&gt;
          &lt;i
            style="display: inline-flex; vertical-align:middle"
            class="tiny material-icons"
          &gt;
            sms
          &lt;/i&gt;
          &lt;span class="black-text" style="font-size:12px"&gt;
            2 hours ago
          &lt;/span&gt;
        &lt;/p&gt;
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="divider" /&gt;
    &lt;li&gt;
      &lt;a href="/notifications" class="blue-text"&gt;
        See All Notifications
      &lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;;
  </code></pre>