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>的{{1}}，data-gt="...group_comment..."是特定文本（第3行，有时在另一行）。

我尝试将"group_comment"与document.querySelectorAll('[data-gt]');一起使用，但是如何在NodeList(5)中找到特定文本？

谢谢。

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>

Answer 2

您应该结合使用属性选择器和包含修饰符*

const commments = document.querySelectorAll('[data-gt*="group_comment"]')

您可以在此处看到不同的修饰符：Attribute Selectors

如何选择具有包含某些文本的属性的元素？

2 个答案: