Question

我有一个具有以下基本结构的表：

<thead>
 <tr>
  <td></td>
  <td></td>
  <td></td>
 </tr>
</thead>
<body>
 <tr>
  <td></td>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
  <td></td>
 </tr>
</tbody>

我想从每个“ tr”标签中删除第二个孩子，所以我想做这样的事情：

const rows = document.getElementsByTagName('td')
for (let i = 0; i < rows.length; i++) {
  rows[i].removeChild(target the second child here)
}

我正在寻找使用纯香草javascript（无jquery）的解决方案

Answer 1

您可以通过单个选择器字符串选择要删除的tds，它可能更优雅：

document.querySelectorAll('td:nth-child(2)')
  .forEach(td => td.remove());

<table>
  <thead>
    <tr>
      <td>td1</td>
      <td>td2</td>
      <td>td3</td>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>td1</td>
      <td>td2</td>
      <td>td3</td>
    </tr>
    <tr>
      <td>td1</td>
      <td>td2</td>
      <td>td3</td>
    </tr>
    <tr>
      <td>td1</td>
      <td>td2</td>
      <td>td3</td>
    </tr>
  </tbody>
</table>

如果HTML有效，则td必定是tr的子代，因此您无需指定td的父代是{ {1}}。

如果要定位页面上的特定表而不是每个表中的每个tr，只需将表标识符放在选择器字符串的前面即可。例如。如果目标表的ID为'table3'，则使用选择器字符串td来指示'#table3 td:nth-child(2)'是其父级的第二个子级，它们是ID为td的元素的后代。

Answer 2

在VanillaJS中，您可以使用document.querySelectorAll()，并使用2nd td浏览forEach()

[].forEach.call(document.querySelectorAll('#myTable td:nth-child(2)'), function(td) {
    td.remove();
});

//$("#myTable td:nth-child(2)").remove()

[].forEach.call(document.querySelectorAll('#myTable td:nth-child(2)'), function(td) {
    td.remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<thead>
 <tr>
  <td>TD-1</td>
  <td>TD-2</td>
  <td>TD-3</td>
 </tr>
</thead>
<tbody>
 <tr>
  <td>TD-1</td>
  <td>TD-2</td>
  <td>TD-3</td>
 </tr>
 <tr>
  <td>TD-1</td>
  <td>TD-2</td>
  <td>TD-3</td>
 </tr>
 <tr>
   <td>TD-1</td>
  <td>TD-2</td>
  <td>TD-3</td>
 </tr>
</tbody>
</table>

Answer 3

您可以将查询选择器与nth-child一起使用。

const rows = document.getElementsByTagName('tr')
for (let i = 0; i < rows.length; i++) {
  rows[i].removeChild(rows[i].querySelector('td:nth-child(2)'));
}

<table>
<thead>
 <tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
 </tr>
</thead>
<tbody>
 <tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
 </tr>
 <tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
 </tr>
 <tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
 </tr>
</tbody>
</table>
<script>
var rows = document.getElementsByTagName('tr');
for (let i = 0; i < rows.length; i++) {
  var row = rows[i];
  var td = row.querySelector('td:nth-child(2)');
  row.removeChild(td);
}
</script>

使用removeChild（）从父DOM中删除特定的索引子项[Vanilla Javascript]

3 个答案: