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

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] 不起作用）

我想删除带有特定文本（ data-gt="...group_comment..." ）的<li> ， "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>

Answer 2

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

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

您可以在此处查看不同的修饰符： 属性选择器