title: Bootstrap 5 offcanvas error: Uncaught TypeError: Cannot read property 'parentNode' of undefined
body: <p>Looping through a list to create a table of information and offcanvas menus to display additional information when a table row <code>&lt;tr&gt;</code> is clicked. Currently, I receive the &quot;parentNode&quot; error when I click on any . Any ideas why I get this error?</p>
  <p>The <code>&lt;tr&gt;</code> has a &quot;data-bs-target&quot; point towards the correct &quot;id&quot; for the Offcanvas but for some reason it does not know the parentNode.</p>
  <p><a href="https://i.stack.imgur.com/wr4Wg.png" rel="nofollow noreferrer">Error Message</a></p>
  <pre class="lang-html prettyprint-override"><code>&lt;table class=&quot;table table-hover table-sm&quot; id=&quot;t1&quot;&gt;
    &lt;thead class=&quot;table-secondary&quot;&gt;
      &lt;th scope=&quot;col&quot; class=&quot;name&quot;&gt;
        Host Name
      &lt;/th&gt;
      &lt;th scope=&quot;col&quot; class=&quot;ip_address&quot;&gt;
        IP Address
      &lt;/th&gt;
  
           ... 
  
    &lt;/thead&gt;
    &lt;tbody class=&quot;lan-table&quot;&gt;
      {% for host in hosts %}
  
        &lt;tr class=&quot;host-row&quot; data-view='host' data-bs-toggle=&quot;offcanvas&quot; data-bs-target=&quot;#{{host.fqdn}}-host-details&quot;&gt;
          &lt;td class=&quot;host-fqdn&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;host-ip-address&quot;&gt;&lt;/td&gt;
  
             ...
  
        &lt;/tr&gt;
      {% endfor %}
    &lt;/tbody&gt;
  &lt;/table&gt;
  
  ...
  
  {% for host in hosts %}
    &lt;div class=&quot;offcanvas offcanvas-end w-25&quot; data-bs-scroll=&quot;true&quot; tabindex=&quot;-1&quot; id=&quot;{{host.fqdn}}-host-details&quot; style=&quot;min-width: 400px;&quot;&gt;
  
      ...
  
    &lt;/div&gt;
  {% endfor %}
  </code></pre>
  <p>Below is a screenshot capturing the page being generated correctly. Note: Since this is capturing fqdn information, I blocked my domain for security.
  <a href="https://i.stack.imgur.com/QFAJw.png" rel="nofollow noreferrer">Static HTML</a></p>