Removing elements from html-table using javascript

Question

I'm trying to remove certain elements from a html-table using javascript. More specifically I need to remove all the nodes that do not contain two substrings.

I've tried to save the positions of the nodes that do not contain these two substrings and then remove them.

var posToRemove = [];
var tbody = document.getElementsByTagName("tbody")[0];
var trTags = tbody.getElementsByTagName("tr");
var substring0 = "Foo";
var substring1 = "Bar";

for (i = 0; i < trTags.length; i++) {
  var trTextContent = trTags[i].textContent;
  if (trTextContent.indexOf(substring0) !== -1 || trTextContent.indexOf(substring1) !== -1) {
    //do something
  } else {
    posToRemove.push(i);
  }
}

for (i = 0; i < posToRemove.length; i++) {
  trTags[posToRemove[i]].remove();
}

<table>
  <tbody>
    <tr>
      <td><a href="https://example.org">Foo</a></td>
      <td>Description</td>
      <td>2019</td>
    </tr>
    <tr>
      <td><a href="https://example.org">Test</a></td>
      <td>Description</td>
      <td>2018</td>
    </tr>
    <tr>
      <td>Bar</td>
      <td>Description</td>
      <td>2017</td>
    </tr>
    <tr>
      <td><a href="https://example.org">Foo</a></td>
      <td>Description</td>
      <td>2019</td>
    </tr>
    <tr>
      <td><a href="https://example.org">Test</a></td>
      <td>Description</td>
      <td>2018</td>
    </tr>
    <tr>
      <td>Bar</td>
      <td>Description</td>
      <td>2017</td>
    </tr>
    <tr>
      <td>Bar</td>
      <td>Description</td>
      <td>2017</td>
    </tr>
    <tr>
      <td>Bar</td>
      <td>Description</td>
      <td>2017</td>
    </tr>
    <tr>
      <td><a href="https://example.org">Foo</a></td>
      <td>Description</td>
      <td>2019</td>
    </tr>
    <tr>
      <td><a href="https://example.org">Foo</a></td>
      <td>Description</td>
      <td>2019</td>
    </tr>
    <tr>
      <td><a href="https://example.org">Test</a></td>
      <td>Description</td>
      <td>2018</td>
    </tr>
  </tbody>
</table>

Sadly doesn't work like expected. It doesn't leave in the table only the elements that contains one of those two strings. I've checked the positions saved in the array and is all correct.

Answer 1

.push() the element to posToRemove instead of i and substitute posToRemove[i].remove() for trTags[i].remove(). Also the first character of each string should be uppercase instead of lowercase to match "Foo" and "Bar".

var posToRemove = [];
var tbody = document.getElementsByTagName("tbody")[0];
var trTags = tbody.getElementsByTagName("tr");
var substring0 = "Foo";
var substring1 = "Bar";

for (let i = 0; i < trTags.length; i++) {
  var trTextContent = trTags[i].textContent;
  if (trTextContent.indexOf(substring0) !== -1 || trTextContent.indexOf(substring1) !== -1) {
    //do something
  } else {
    posToRemove.push(trTags[i]);
  }
}

for (let i = 0; i < posToRemove.length; i++) {
  posToRemove[i].remove();
}

<table>
<tbody>
<tr>
  <td><a href="https://example.org">Foo</a></td>
  <td>Description</td>
  <td>2019</td>
</tr>
<tr>
  <td><a href="https://example.org">Test</a></td>
  <td>Description</td>
  <td>2018</td>
</tr>
<tr>
  <td>Bar</td>
  <td>Description</td>
  <td>2017</td>
</tr>
</tbody>
</table>