使用javascript从html-table中删除元素

Question

我试图使用javascript从html表中删除某些元素。更具体地说，我需要删除不包含两个子字符串的所有节点。

我尝试保存不包含这两个子字符串的节点的位置，然后删除它们。

​

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>

​

可悲的是不像预期的那样工作。它并不只保留在表中包含这两个字符串中的一个的元素。我已经检查了保存在数组中的位置，并且都是正确的。

Answer 1

将元素.push()改为posToRemove，而不是i，并将posToRemove[i].remove()替换为trTags[i].remove()。此外，每个字符串的第一个字符应该是大写字母，而不是小写字符，以匹配"Foo"和"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>

​

Answer 2

row.textContent.search(RegEx)

1. 使用.rows HTMLCollection收集所有表，并将其转换为数组。 const = document.querySelector('table')；const = Array.from(T.rows)；
2. 在数组上运行.forEach()，在行的每一次迭代开始时，获取.textContent。 R.forEach((行，idx) => { const = row.textContent；.
3. 接下来，对.search()方法使用正则表达式。搜索上一步中的字符串。regex是对Foo替换的一个简单的文字搜索：|到Bar。搜索的结果将是查找子字符串的索引，如果没有发现，则为-1。 . const = str.search( rgx )；
4. 如果结果是-1，我们知道应该删除该行，并使用.parentElement属性和.removeChild()方法进行删除。 如果(i === -1) {row.parentElement.removeChild(行)；}.

演示

​

const T = document.querySelector('table');
const R = Array.from(T.rows);

R.forEach((row, idx) => {
  const str = row.textContent;
  const rgx = /Foo|Bar/;
  const i = str.search(rgx);
  if (i === -1) {
    row.parentElement.removeChild(row);
  }
});

<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>

​