title: How to get parent multiple levels up the DOM tree without jQuery or modifying Element.prototype?
body: <p>I am wondering if there is a way to select a specific element way up the DOM only using vanilla JS while not having to use <code>parentNode</code> multiple times. I understand you can do this with jQuery and modifying <code>Element.prototype</code>, but are there any other pretty ways to write this.</p>
  
  <pre class="lang-js prettyprint-override"><code>  const deleteButtons = document.querySelectorAll('.delete-button');
  
    for (var i = 0; i &lt; deleteButtons.length; i++) {
      deleteButtons[i].addEventListener('click', (e) =&gt; {
        e.preventDefault();
  
        //This is the crazy amount of parentNode usage
        bookDatabase.child(e.target.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.getAttribute("id")).remove();
        });
      }
  </code></pre>