Удалить таблицу Dynami c HTML, используя идентификатор таблицы?

Question

Я создаю несколько таблиц из одной таблицы (идентификатор таблицы = table6). Если я создал новую таблицу из таблицы id = 'table6', я хочу удалить эту вновь созданную таблицу, используя ее идентификатор таблицы. Я назначил идентификаторы таблиц для вновь созданных таблиц. что не так в моем коде? Я хочу удалить эту таблицу HTML. Любой намек?

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 < 0; i++) {
  //   newTbody.appendChild(baseRowTbl.cloneNode(true));
  // }
  newTable.querySelectorAll('input').forEach((element) => {
    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(); 
  });
}

table {
  border-collapse: collapse;
  margin: 1em;
}
thead {
  background-color: lightblue;
}
td,
th {
  border: solid grey 1px;
  padding: 1em;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button style="margin: 1%" onclick="generateAgg()">Generate New Table</button>
<table id="table6">
        <thead>
          
        <th colspan="6">Table</th>
    
        <tr>
          <th> Column 1 </th>
          <th> Column 2 </th>
         
      
        </tr>
        </thead>
        <tbody>
        <tr>
      
          <td>
            <input>
            </input>
          </td>
          <td><input>
            </input></td>
    
        </tr>
        <tr>
     
        <td>
          <button style="margin: 1%" onclick="tID()">delete </button>
        </td>
      </tr>
      </tbody>
      </table>

JsFiddle link -> https://jsfiddle.net/shreekantbatale2/hn0286zd/8/

Answer 1

Несмотря на то, что вы получаете значение идентификатора таблицы, необходимо правильно сослаться на jquery с ведущим # в селекторе.

Измените это:

$(tbl).remove(); 

. ..to:

$('#' + tbl).remove(); 

Затем таблица удаляется.