使用javascript从html表中删除元素

Question

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

我想救不包含这两个字符串，然后节点的位置删除它们。

List<TestPair>

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();
}

严重无法正常工作。它没有在表中仅元素包含这两个字符串中的一个离开。我已经检查了数组中保存的位置，并且都是正确的。

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 T = document.querySelector('table');
   const R = Array.from(T.rows);
   

2. 在数组上运行.forEach()，并在一行的每次迭代开始时获取.textContent。

   R.forEach((row, idx) => {
     const str = row.textContent;
     ...
   

3. 接下来，使正则表达式与.search()方法一起使用。搜索上一步中的字符串。正则表达式是从Foo到|的{​​{1}}交替的简单文字搜索。搜索的结果将是找到的子字符串的索引；如果没有找到，则为-1。

   Bar

4. 如果结果为-1，则我们知道应删除此行，并使用const rgx = /Foo|Bar/; const i = str.search(rgx); ... 属性和.parentElement方法删除该行。

   .removeChild()

---

演示

if (i === -1) {
 row.parentElement.removeChild(row);
}...

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);
  }
});