title: Delete Dynamic HTML table using table id?
body: <p>I'm creating multiple tables from one table (table id = table6)
  If I created a new table from table id ='table6', I want to delete that newly generated table using its table id. I have assigned table ids to the newly generated tables. what's wrong in my code?
  I want to delete this HTML table. Any hint?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var aggTableNum = 0;
  
  function generateAgg() {
    const originTable = document.getElementById('table6');
    const baseRowTbl = originTable.querySelector('tbody tr');
    let newTable = originTable.cloneNode(true);
    let newTbody = newTable.querySelector('tbody');
    newTable.id = 'newAggTable' + ++aggTableNum;
    // for (i = 0; i &lt; 0; i++) {
    //   newTbody.appendChild(baseRowTbl.cloneNode(true));
    // }
    newTable.querySelectorAll('input').forEach((element) =&gt; {
      element.value = '';
    });
    document.body.appendChild(newTable);
  }
  
  function tID() {
    $('table').on('click', 'button', function (e) {
      alert(e.delegateTarget.id);
       var tbl = e.delegateTarget.id;
      console.log(tbl);
      // if (tbl) tbl.parentNode.removeChild(tbl);
      $(tbl).remove(); 
    });
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table {
    border-collapse: collapse;
    margin: 1em;
  }
  thead {
    background-color: lightblue;
  }
  td,
  th {
    border: solid grey 1px;
    padding: 1em;
    text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;button style="margin: 1%" onclick="generateAgg()"&gt;Generate New Table&lt;/button&gt;
  &lt;table id="table6"&gt;
          &lt;thead&gt;
            
          &lt;th colspan="6"&gt;Table&lt;/th&gt;
      
          &lt;tr&gt;
            &lt;th&gt; Column 1 &lt;/th&gt;
            &lt;th&gt; Column 2 &lt;/th&gt;
           
        
          &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
          &lt;tr&gt;
        
            &lt;td&gt;
              &lt;input&gt;
              &lt;/input&gt;
            &lt;/td&gt;
            &lt;td&gt;&lt;input&gt;
              &lt;/input&gt;&lt;/td&gt;
      
          &lt;/tr&gt;
          &lt;tr&gt;
       
          &lt;td&gt;
            &lt;button style="margin: 1%" onclick="tID()"&gt;delete &lt;/button&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;/tbody&gt;
        &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>JsFiddle link - > <a href="https://jsfiddle.net/shreekantbatale2/hn0286zd/8/" rel="nofollow noreferrer">https://jsfiddle.net/shreekantbatale2/hn0286zd/8/</a></p>