CODEWITHSUNDEEP
javascripthtmldom
Carlos Pisarello
Carlos Pisarello

Reputation: 1284

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:

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)

Upvotes: 0

Views: 892

Answers (3)

NullPointer
NullPointer

Reputation: 7368

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>

Upvotes: 1

Unmitigated
Unmitigated

Reputation: 89254

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>

Upvotes: 0

CertainPerformance
CertainPerformance

Reputation: 370759

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 tds will necessarily be children of trs 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.

Upvotes: 2

Related Questions