-1

I want to remove an element by injecting JS into webpage:

javascript:(function() {
  var parent = document.getElementsByTagName('head').item(0);
  var style = document.createElement('style');
  style.type = 'text/css';
  style.innerHTML = '.ls-wrapper.ls-in-out { display: none; }';
  parent.appendChild(style);
})()

The div holding the link to Google Play should disappear, but nothing happens. What am I doing wrong? I am trying this on Chrome Console. Here are class names .ls-wrapper and .ls-in-out:

enter image description here

c0dehunter
  • 6,412
  • 16
  • 77
  • 139
  • Is your CSS specificity high enough? – DoloMike Aug 14 '18 at 15:47
  • You could target just the Google Play button by using `document.querySelectorAll(".ls-wrapper.ls-in-out").item(2).style.display = "none";` – Luca Kiebel Aug 14 '18 at 15:50
  • The screenshot you've provided doesn't show the most important part, which would be: Are you seeing the ` – Tyler Roper Aug 14 '18 at 15:50
  • 1
    You've got an inline style specifying `display: block` that will override any stylesheet reference unless you put `!important` after the property value. See [what is the priority of styling an element in html?](https://stackoverflow.com/q/41226030) – Heretic Monkey Aug 14 '18 at 15:51
  • @HereticMonkey, `!important` did the trick! Thanks! – c0dehunter Aug 14 '18 at 15:56
  • Possible duplicate of [what is the priority of styling an element in html?](https://stackoverflow.com/questions/41226030/what-is-the-priority-of-styling-an-element-in-html) – Heretic Monkey Aug 14 '18 at 15:57

1 Answers1

-1

Try

style.appendChild(document.createTextNode(youCssHere));
instead of modifying innerHTML