使用removeChild（）从父DOM中删除特定的索引子项[Vanilla Javascript]
[英]Remove specific index child from parent DOM with removeChild() [Vanilla Javascript]
问题描述
i have a table with this basic structure: 
我有一个具有此基本结构的表：
<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>
and i want to remove the second child from every "tr" tag, so i would like to do something like this: 我想从每个“ tr”标签中删除第二个孩子，所以我想做这样的事情：
const rows = document.getElementsByTagName('td')
for (let i = 0; i < rows.length; i++) {
rows[i].removeChild(target the second child here)
}
i'm looking for a solution with pure vanilla javascript (no jquery) 我正在寻找使用纯香草javascript的解决方案（无jquery）
3 个解决方案
解决方案1
2 已采纳 2018-08-17 19:23:44
You might select the tds you want to remove via a single selector string, it's probably more elegant: 您可以通过单个选择器字符串选择要删除的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>
If the HTML is valid, the td s will necessarily be children of tr s regardless, so you don't need to specify that the td 's parent is a tr . 如果HTML有效，则td必定是tr的子代，因此不必指定td的父代是tr 。
If you want to target a specific table on the page, rather than every td in every table, just put the table identifier in front of the selector string. 如果要针对页面上的特定表而不是每个表中的每个td ，只需将表标识符放在选择器字符串的前面即可。 Eg. 例如。 if the target table's ID is 'table3', then use the selector string '#table3 td:nth-child(2)' to indicate td which are the second child in their parent, which are descendants of the element with ID table3 . 如果目标表的ID为'table3'，则使用选择器字符串'#table3 td:nth-child(2)'指示td是其父级的第二个子级，它们是ID为table3的元素的后代。
解决方案2
1 2018-08-17 19:32:01
In VanillaJS you can use document.querySelectorAll() and walk over the 2nd td using forEach() 在VanillaJS中，您可以使用document.querySelectorAll()并使用forEach()遍历2nd td
[].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>
解决方案3
0 2018-08-17 19:25:14
You can use a query selector with nth-child . 您可以将查询选择器与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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.