JS / CSS -如何匹配包含字符串的元素

Question

我正在处理一个由旧系统生成的HTML文件，因此不幸的是，我无法控制HTML代码的生成。

HTML代码如下所示:

<table cellpadding=10>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
<tr>
<td>Name: XYZ</td>
<td>Lorem Ipsum Description</td>
<td>More Lorem Ipsum</td>
</tr>
<tr>
<td>Name: XYZ</td>
<td>Lorem Ipsum Description</td>
<td>More Lorem Ipsum</td>
</tr>
<tr>
<td>Name: 123</td>
<td>Lorem Ipsum Description</td>
<td>More Lorem Ipsum</td>
</tr>
<tr>
<td>Name: XYZ</td>
<td>Lorem Ipsum Description</td>
<td>More Lorem Ipsum</td>
</tr>
<tr>
<td>Name: XYZ</td>
<td>Lorem Ipsum Description</td>
<td>More Lorem Ipsum</td>
</tr>
</table>

表包含1行table Header，然后包含4行数据。
可以看到，第三行数据的第一个单元格有一个不同的文本Name: 123。

我需要隐藏/删除行Name: 123。

到目前为止，我已经尝试使用CSS，但是没有选择器允许我匹配包含给定String的元素。

我如何隐藏/删除行Name: 123?如果需要的话，我很乐意使用CSS或JS。

Answer 1

选取每行的所有第一个子元素(即第一个单元格)的节点列表，并遍历它们。如果它的文本内容匹配"Name: 123"然后从DOM中删除它的父节点(row元素)。

const cells = document.querySelectorAll('tr td:first-child');
for (let i = 0; i < cells.length; i++) {
if (cells[i].textContent === 'Name: 123') {
cells[i].parentNode.classList.add('hidden');
break;
}
}

.hidden { display: none; }

<table cellpadding=10>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
<tr>
<td>Name: XYZ</td>
<td>Lorem Ipsum Description</td>
<td>More Lorem Ipsum</td>
</tr>
<tr>
<td>Name: XYZ</td>
<td>Lorem Ipsum Description</td>
<td>More Lorem Ipsum</td>
</tr>
<tr>
<td>Name: 123</td>
<td>Lorem Ipsum Description</td>
<td>More Lorem Ipsum</td>
</tr>
<tr>
<td>Name: XYZ</td>
<td>Lorem Ipsum Description</td>
<td>More Lorem Ipsum</td>
</tr>
<tr>
<td>Name: XYZ</td>
<td>Lorem Ipsum Description</td>
<td>More Lorem Ipsum</td>
</tr>
</table>