javascript - 使用表 ID 删除动态 HTML 表？

Question

我正在从一个表创建多个表(表 id = table6)如果我从表 id ='table6' 创建了一个新表，我想使用其表 id 删除该新生成的表。我已将表 ID 分配给新生成的表。我的代码有什么问题吗？我想删除这个 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链接->https://jsfiddle.net/shreekantbatale2/hn0286zd/8/

Answer 1

虽然您获取了表 id 的值，但需要使用 jquery 在选择器中使用前导 # 正确引用该值。

更改此:

$(tbl).remove(); 

...至:

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

然后表格被删除。