Remove specific index child from parent DOM with removeChild() [Vanilla Javascript]
Question
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:
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)
3 answers
solution1
2 ACCPTED 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:
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 .
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. 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 .
solution2
1 2018-08-17 19:32:01
In VanillaJS you can use document.querySelectorAll() and walk over the 2nd td using 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>
solution3
0 2018-08-17 19:25:14
You can use a query selector with 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.