I want to hide with jquery one of the list-items at the left-bottom of the page on www.weert.nl, for example the one with title ‘Kerststal van de zusters Birgittinessen’.
How to do this?
Everyting I’ve tried, is not working on the list-items.
This is my script:
$(document).ready(function() {
// Ensure whitespace and case issues are handled
$('#evenementenlijst li').each(function() {
// Get the trimmed text of the a element
const linkText = $(this).find('a').text().trim().toLowerCase();
// Check if it matches "live music"
if (linkText === 'kerststal van de zusters birgittinessen') {
$(this).hide(); // Hide the li element
}
});
});
Any sugestions? Thanks in advance!
2
You could make use of the rather new, but well supported, :has CSS pseudo-class to apply display:none to any li element that has a descendent that has the link to the relevant location.
In JavaScript you can do that as follows:
document.head.insertAdjacentHTML(
"beforeEnd",
"<style> li:has(a[href*=birgittinessen]) { display: none; } </style>"
);
This can be executed before the target element is inserted in the DOM.