title: Uncaught TypeError: Cannot read property 'parentElement' of undefined
body: <p>I found a lot of answered questions similar to my question yet all of those, the elements are actually "undefined". In my case, it exists.</p>
  
  <p>My code works as expected. Basically it's adding eventListener to all modal-dismiss button which is an anchor. The closing function is to find the outer most modal div and give it "hidden" class which set its display to none.</p>
  
  <p>It closes the modal correctly but after the modal is closed, that error show up. </p>
  
  <pre><code>const bookBTN =             document.getElementById('bookBTN');
  const apptModalStart =      document.getElementById('appt-start');
  const apptModalEnd =        document.getElementById('appt-end');
  const apptStartContent =    apptModalStart.querySelector('.appt-content');
  const apptEndContent =      apptModalEnd.querySelector('.appt-content');
  const modalCloseBTNs =      document.querySelectorAll('.modal-dismiss');
  
  for(let i = 0; i &lt; modalCloseBTNs.length; i++) {
      modalCloseBTNs[i].addEventListener('click', function(e) {
          closeAppointmentWindow(modalCloseBTNs[i]);
      })
  }
  
  const closeAppointmentWindow = (btn) =&gt; {
      let parent = getClosestParentByClass(btn, "appt-modal");  // Line 52
      parent.classList.add('faded');
      if(parent === apptModalStart) showBTN(bookBTN);
      setTimeout(function() {
          parent.classList.add('hidden');
      }, 300);
  }
  
  const getClosestParentByClass = (e, parentClass) =&gt; {
      let parent = e.parentElement;  // Line 61
      if(e.parentElement.classList.contains(parentClass)) return parent;
      else return getClosestParentByClass(parent, parentClass);
  }
  </code></pre>
  
  <blockquote>
    <p>appointments.js:61 Uncaught TypeError: Cannot read property
    'parentElement' of undefined</p>
    
    <p>at getClosestParentByClass (appointments.js:61)</p>
    
    <p>at closeAppointmentWindow (appointments.js:52)</p>
    
    <p>at HTMLDivElement. (appointments.js:30)</p>
  </blockquote>
  
  <p>Please give me some insight as to why it is giving me that error.</p>
  
  <p>Edits: I have already console.log(modalCloseBTNs), console.log(modalCloseBTNs[i]) in the loop, console.log(e) and console.log(btn) respectively in each function and they are all defined. Except for btn and e, they shows 2 versions each, one is defined the 2nd one right after the function finished (which is hinting that it runs 2 times??? for some reason) that is undefined.</p>