I have this HTML code:
<li class="_33c randomtext3" data-gt="{"alert_id":1576605904117859,"notif_type":"pub_ment","from_uids"}">
<li class="_33c randomtext5" data-gt="{"alert_id":1576605904117859,"notif_type":"year_ment","from_uids"}">
<li class="_33c randomtext4" data-gt="{"alert_id":1576605904117859,"notif_type":"group_ment","from_uids"}">
<li class="_33c randomtext7" data-gt="{"alert_id":1576605904117859,"notif_type":"pub_ment","from_uids"}">
<li class="_33c randomtext5" data-gt="{"alert_id":1576605904117859,"notif_type":"pub_ment","from_uids"}">
The order of the lines is varied, (using [2] doesn't work)
I want to delete the <li> with a certain text (data-gt="...group_ment..."), "group_ment" is the certain text (the line 3, sometimes it is on another line).
I tried with document.querySelectorAll('[data-gt]'); with a NodeList(5), but how to find in that NodeList the certain text?
Thank you.
I have this HTML code:
<li class="_33c randomtext3" data-gt="{"alert_id":1576605904117859,"notif_type":"pub_ment","from_uids"}">
<li class="_33c randomtext5" data-gt="{"alert_id":1576605904117859,"notif_type":"year_ment","from_uids"}">
<li class="_33c randomtext4" data-gt="{"alert_id":1576605904117859,"notif_type":"group_ment","from_uids"}">
<li class="_33c randomtext7" data-gt="{"alert_id":1576605904117859,"notif_type":"pub_ment","from_uids"}">
<li class="_33c randomtext5" data-gt="{"alert_id":1576605904117859,"notif_type":"pub_ment","from_uids"}">
The order of the lines is varied, (using [2] doesn't work)
I want to delete the <li> with a certain text (data-gt="...group_ment..."), "group_ment" is the certain text (the line 3, sometimes it is on another line).
I tried with document.querySelectorAll('[data-gt]'); with a NodeList(5), but how to find in that NodeList the certain text?
Thank you.
Share Improve this question edited Dec 17, 2019 at 19:06 Patrick Michaelsen 1,05414 silver badges19 bronze badges asked Dec 17, 2019 at 18:37 Alizee TiconaAlizee Ticona 713 silver badges9 bronze badges 02 Answers
Reset to default 4Use the attribute value selector and wildcard selector.
document.querySelectorAll('li[data-gt*=group_ment]')
See https://www.geeksforgeeks/wildcard-selectors-and-in-css-for-classes/
const matches = document.querySelectorAll('[data-gt*="group_ment"]')
matches.forEach( x => x.classList.add("hidden") ).hidden {
display: none;
}<ul>
<li class="_33c randomtext3" data-gt="{"alert_id":1576605904117859,"notif_type":"pub_ment","from_uids"}"> pub_ment </li>
<li class="_33c randomtext5" data-gt="{"alert_id":1576605904117859,"notif_type":"year_ment","from_uids"}"> year_ment </li>
<li class="_33c randomtext4" data-gt="{"alert_id":1576605904117859,"notif_type":"group_ment","from_uids"}"> group_ment </li>
<li class="_33c randomtext7" data-gt="{"alert_id":1576605904117859,"notif_type":"pub_ment","from_uids"}">pub_ment</li>
<li class="_33c randomtext5" data-gt="{"alert_id":1576605904117859,"notif_type":"pub_ment","from_uids"}">pub_ment</li>
</ul>You should use attribute selector bined with the contains modifier *
const mments = document.querySelectorAll('[data-gt*="group_ment"]')
You can see the different modifiers here: Attribute Selectors