Remove "content" CSS property "onclick" button for the entire website

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function myFunction() {
  document.getElementById('img');
  const element = document.styleSheets[0].cssRules[0].style.removeProperty('content');
}

<!-- language: lang-css -->

img {
  content: url("https://static.vecteezy.com/system/resources/previews/005/476/277/original/under-18-forbidden-round-icon-sign-illustration-eighteen-or-older-persons-adult-content-18-plus-only-rating-isolated-on-white-background-free-vector.jpg");
  max-width: 100%;
  height: auto;
}

<!-- language: lang-html -->

<button onclick="myFunction()">Show pics</button>

<img src="https://m.media-amazon.com/images/I/81K2hJBAduL.png">

<!-- end snippet -->

The point is that after clicking on the "delete" button, the "content" property for the entire website.

All you really need is to set a class on the body, this will affect every image on the page:

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-js -->

function myFunction() {
  document.body.classList.add('permitted');
  setCookie('permitted-images', '1');
}

document.addEventListener('DOMContentLoaded', function(){
  if( getCookie('permitted-images') == '1' ){
    document.body.classList.add('permitted');
  }
});


/** functions for handling cookies **/
function setCookie(name,value,days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}

function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

<!-- language: lang-css -->

body:not(.permitted) img {
  content: url("https://static.vecteezy.com/system/resources/previews/005/476/277/original/under-18-forbidden-round-icon-sign-illustration-eighteen-or-older-persons-adult-content-18-plus-only-rating-isolated-on-white-background-free-vector.jpg");
  max-width: 100%;
  height: auto;
}

<!-- language: lang-html -->

<button onclick="myFunction()">Show pics</button>
<img src="https://m.media-amazon.com/images/I/81K2hJBAduL.png">

<img src="https://cdn.pixabay.com/photo/2023/04/02/12/40/mistletoe-7894574_1280.jpg">

<img src="https://cdn.pixabay.com/photo/2015/04/23/21/59/tree-736877_1280.jpg">

<!-- end snippet -->

Edit: I added code to make the class persist across page loads, using cookies.

Note: Cookies are restricted in the code snippets on StackOverflow, so it will not work when testing here. But I have tested it locally, and it does work.

The default expiration of cookies is when the session ends; meaning the cookies are deleted when the website is closed. To keep the cookie for longer, add number of days to setCookie: setCookie('permitted-images', '1', 30); (this will keep the cookie for 30 days).

Code for handling cookies in javascript found here: stackoverflow.com/a/24103596/1678383

@Rafal You're only selecting the first instance of the stylesheet. It would help if you iterated through the stylesheet to remove all instances of the "content" property.

For example:

<script>
function myFunction() {
  const styleSheets = document.styleSheets;
  for (let i = 0; i < styleSheets.length; i++) {
    const cssRules = styleSheets[i].cssRules;
    for (let j = 0; j < cssRules.length; j++) {
      const rule = cssRules[j];
      if (rule.style && rule.style.removeProperty) {
        rule.style.removeProperty('content');
      }
    }
  }
}

</script>