Search code examples
javascripthtmlcssformattingstrikethrough

Remove/Hide all "text-decoration: line-through" formatted elements on a Website?


How to remove or hide all elements on a webpage when text is formatted with: text-decoration: line-through?

Because these elements are already obsolete or just for reference, i don't want to see them anymore.

<s>hide this line</s>

The solution should be universal and work for nearly every website., that means blocking them by class name is not the solution i prefer. Never the less, i'm open for every solution that works, JS, CSS, Browser setting, others ...

Any ideas how to solve this?

I've an approach with Tampermonkey but, this just helps to remove the strike out lines, not the element itself.

GM_addStyle('* { text-decoration: none !important; }');

I want something like that in the Pseudo code:

if (element.text-decoration == line-through) then
  element.remove

Solution

  • Use the browser plugin Tampermonkey to load user scripts into the browser.

    Script code:

    // ==UserScript==
    // @name         Remove strikethrough text
    // @version      1.0
    // @description  Removes all elements where 'text-decoration' == 'line-through'
    // @author       CK
    // @match        *://*/*
    // @grant        none
    // ==/UserScript==
    
    var elems = document.body.getElementsByTagName('*');
    for(var i = 0; i < elems.length; i++) {
      var elemStyle = window.getComputedStyle(elems[i]);
      if(elemStyle.getPropertyValue('text-decoration').startsWith('line-through',0)) {
        elems[i].remove();
      }
    }