0

I am trying to hide the price element from this CSS path using Greasemonkey.

 html body div#__nuxt div#__layout div.lv-default-layout.-header-is-immersive main#main.lv-default-layout__content div.lv-category div.lv-paginated-list.lv-product-list ul.lv-list.lv-product-list__items li#lv-card-M46279.lv-product-list__item div.lv-product-card.-has-mini-slider.-full-bleed.-default-variant div.lv-product-card__wrap div.lv-product-card__info-wrapper div.lv-product-card__info div.lv-price.lv-product-card__price.body-xs

Based on other SO answers I wrote the following Greasemonkey script

 // ==UserScript== // @name hide-LV-prices // @include https://ap.louisvuitton.com/* // @description Hides prices on Louis Vuitton page // @require http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js // @grant GM_addStyle // ==/UserScript== $(".lv-product-card__price.body-xs").hide()

but prices are still being displayed. Original URL is https://ap.louisvuitton.com/eng-sg/bags/for-women/all-handbags/_/N-t1rrahxp. HTML example is:

<div class="lv-price lv-product-card__price body-xs"><!----> <span class="notranslate">S$ 5,500.00</span> <!----> </div>
Improve this question
3
  • 1
    Post your relevant HTML as well. Other wise it's guessing game :) Commented Mar 27, 2023 at 5:18
  • @4b0 good point, edited post to add URL. Commented Mar 27, 2023 at 6:42
  • 2
    It happens because the element is added after your script runs so jQuery hides an array of zero elements. You can debug it yourself in devtools. The solution is to remove jQuery and use GM_addStyle('.lv-product-card__price.body-xs { display: none !important }') Commented Mar 27, 2023 at 8:43

1 Answer 1

Reset to default
2

JavaScript code makes changes at the time it runs. On the other hand CSS rules make changes at the time they are added and from then on (unless overwritten).

As mentioned by wOxxOm, CSS will be applied to elements that are created later on.

Here is a sample userscript to work on.

Note
GM_addStyle/GM.addStyle are not supported in the current GM4.
GM_addStyle/GM.addStyle are supported in FireMonkey, Tampermonkey, & Violentmonkey.

<div class="lv-price lv-product-card__price body-xs"><!----> <span class="notranslate">S$ 5,500.00</span> <!----> </div>

FireMonkey, Tampermonkey, Violentmonkey

// ==UserScript== // @name hide-LV-prices // @include https://ap.louisvuitton.com/* // @description Hides prices on Louis Vuitton page // @grant GM.addStyle // ==/UserScript== const css = `.lv-product-card__price.body-xs { display: none !important; }`; GM_addStyle(css);

Greasemonkey

// ==UserScript== // @name hide-LV-prices // @include https://ap.louisvuitton.com/* // @description Hides prices on Louis Vuitton page // @grant GM.addStyle // ==/UserScript== GM.addStyle = (css) => { const style = document.createElement('style'); style.textContent = css; (document.head || document.body).appendChild(style); }; const css = `.lv-product-card__price.body-xs { display: none !important; }`; GM_addStyle(css);

You can also make a userscript for all userscript managers.

FireMonkey, Greasemonkey, Tampermonkey, Violentmonkey

// ==UserScript== // @name hide-LV-prices // @include https://ap.louisvuitton.com/* // @description Hides prices on Louis Vuitton page // @grant GM.addStyle // ==/UserScript== // check if GM.addStyle is supported if (typeof GM.addStyle !== 'function') { // define GM.addStyle GM.addStyle = (css) => { const style = document.createElement('style'); style.textContent = css; (document.head || document.body).appendChild(style); }; } const css = `.lv-product-card__price.body-xs { display: none !important; }`; GM_addStyle(css);
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.