javascript - 如何选择具有包含特定文本的属性的元素？

Question

我有这个 HTML 代码:

<li class="_33c randomtext3" data-gt="{&quot;alert_id&quot;:1576605904117859,&quot;notif_type&quot;:&quot;pub_comment&quot;,&quot;from_uids&quot;}">
<li class="_33c randomtext5" data-gt="{&quot;alert_id&quot;:1576605904117859,&quot;notif_type&quot;:&quot;year_comment&quot;,&quot;from_uids&quot;}">
<li class="_33c randomtext4" data-gt="{&quot;alert_id&quot;:1576605904117859,&quot;notif_type&quot;:&quot;group_comment&quot;,&quot;from_uids&quot;}">
<li class="_33c randomtext7" data-gt="{&quot;alert_id&quot;:1576605904117859,&quot;notif_type&quot;:&quot;pub_comment&quot;,&quot;from_uids&quot;}">
<li class="_33c randomtext5" data-gt="{&quot;alert_id&quot;:1576605904117859,&quot;notif_type&quot;:&quot;pub_comment&quot;,&quot;from_uids&quot;}">

行的顺序是多种多样的，(使用 [2] 不起作用)

我想删除 <li>带有特定文本 ( data-gt="...group_comment..." ), "group_comment"是特定文本(第3行，有时在另一行)。

我试过 document.querySelectorAll('[data-gt]');用NodeList(5) , 但如何在 NodeList 中找到特定文本？

谢谢。

Answer 1

使用属性值选择器和通配符选择器。

document.querySelectorAll('li[data-gt*=group_comment]')

参见 https://www.geeksforgeeks.org/wildcard-selectors-and-in-css-for-classes/

const matches = document.querySelectorAll('[data-gt*="group_comment"]')
matches.forEach( x => x.classList.add("hidden") )

.hidden {
  display: none;
}

<ul>
  <li class="_33c randomtext3" data-gt="{&quot;alert_id&quot;:1576605904117859,&quot;notif_type&quot;:&quot;pub_comment&quot;,&quot;from_uids&quot;}"> pub_comment </li>
  <li class="_33c randomtext5" data-gt="{&quot;alert_id&quot;:1576605904117859,&quot;notif_type&quot;:&quot;year_comment&quot;,&quot;from_uids&quot;}"> year_comment </li>
  <li class="_33c randomtext4" data-gt="{&quot;alert_id&quot;:1576605904117859,&quot;notif_type&quot;:&quot;group_comment&quot;,&quot;from_uids&quot;}"> group_comment </li>
  <li class="_33c randomtext7" data-gt="{&quot;alert_id&quot;:1576605904117859,&quot;notif_type&quot;:&quot;pub_comment&quot;,&quot;from_uids&quot;}">pub_comment</li>
  <li class="_33c randomtext5" data-gt="{&quot;alert_id&quot;:1576605904117859,&quot;notif_type&quot;:&quot;pub_comment&quot;,&quot;from_uids&quot;}">pub_comment</li>
</ul>