CSS Solution
To hide the cookie notification, use the following CSS code if the class is consistent:
.sm-eu-cookie-message{
display: none; /* Use !important if needed for persistence */
}
Alternatively, with the !important flag:
.sm-eu-cookie-message{
display: none!important;
}
If the class varies but the attribute id values are constant, you can utilize substring matching attribute selectors like ^ or $.
[attribute^=value]: Selects elements where the attribute starts with specified value.[attribute$=value]: Selects elements where the attribute ends with specified value.
[id^=yui_],
[id^=yui_ i] {
color: red;
}
[id$=_32] {
color: blue;
}
<div class="sm-eu-cookie-message" id="yui_3_8_0_1_1478749888956_changedfordemo">
Id starts with <em>yui_</em>
</div>
<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_1_1478749888956_32">
Id ends with <em>_32</em>
</div>
You can broaden coverage by using the * substring matching attribute selector as well.
[attribute*=value]: Selects elements with at least one instance of the specified value in the attribute.
[id^=yui_],
[id^=yui_ i],
[id*=yui_],
[id*=yui_ i]{
color: red;
}
[id$=_32],
[id*=_32]{
color: blue;
}
<div class="sm-eu-cookie-message" id="yUI_3_8_0_1_1478749888956_changedfordemo">
Id starts with <em>yUI_</em>
</div>
<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_1_1478749888956_32">
Id contains an instance of <em>_32</em>
</div>
For more information on these selectors, refer to this source from W3C.
Note that external sources may change the notification suddenly, rendering previous selectors ineffective and requiring updates.
EDIT:
JavaScript Method
This method requires jQuery library, which can be found here.
Two options are available:
- Manually create a jQuery Multiple selector and use
remove().
- Implement a function to automate the process.
1) Manually create a jQuery Multiple selector:
$(document).ready(function() {
$("[id^=yui_], [id$=_32], [id*=yui_], [id*=_32], [id^=yui_ i], [id$=_32 i], [id*=yui_ i], [id*=_32 i], [id^=yui_][id$=_32], [id^=yui_ i][id$=_32 i]").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
2. Utilize a function for automation:
$(document).ready(function() {
function removeByAttSubstring(att, beginsWith, endsWith, bContains, bCaseInsensitive, bBeginsAndEndsWith) {
var sBw = att + "^=" + beginsWith,
sEw = att + "$=" + endsWith,
sCbw = att + "*=" + beginsWith,
sCew = att + "*=" + endsWith;
var aSelectors = [sBw, sEw, sCbw, sCew];
if (bCaseInsensitive === true) {
var sBwCi = att + "^=" + beginsWith + " i",
sEwCi = att + "$=" + endsWith + " i",
sCbwCi = att + "*=" + beginsWith + " i",
sCewCi = att + "*=" + endsWith + " i";
aSelectors.push(sBwCi, sEwCi, sCbwCi, sCewCi);
}
if (bBeginsAndEndsWith === true) {
var sBwaew = sBw + "][" + sEw;
aSelectors.push(sBwaew);
}
if (bCaseInsensitive === true && bBeginsAndEndsWith === true) {
var sBwaewCi = sBw + " i][" + sEw + " i";
aSelectors.push(sBwaewCi);
}
for (var i = 0; i < aSelectors.length; i++) {
aSelectors[i] = "[" + aSelectors[i] + "]";
}
var sSelectors = aSelectors.join(", ");
$(sSelectors).remove();
}
removeByAttSubstring("id", "yui_", "_32", true, true, true);
});
Parameters:
att: The target attribute (type: string).beginsWith: The starting value of the attribute (type: string).endsWith: The ending value of the attribute (type: string).bContains: Boolean indicating the use of * for both start and end values (type: boolean).bCaseInsensitive: True if case-insensitive match should be applied (type: boolean).bBeginsAndEndsWith: True for stacking attribute selectors (type: boolean).
Example Call:
removeByAttSubstring("id", "yui_", "_32", true, true, true);
Notes:
- Level 4 CSS selectors are employed here; browser support details can be checked here.