remove CSS attribute from the JavaScript DOM properties

Question

remove CSS attribute from the JavaScript DOM properties

Can someone help me figure out what's wrong with my code? I need to remove all "link" tags with the attribute "rel = "stylesheet"

Here is the HTML code I am working with:

<html>
<head>
<title>teset</title>
<meta charset="utf-8" />
<meta name="description" content="test." />
<meta name="author" content="Me" />
<link rel="author" href="www.mysite.uk" />
<link rel="stylesheet" type="text/css" href="www.mysite.uk/css/style.css  />
<link rel="stylesheet" type="text/css" href="www.mysite.uk/css/style2.css />
</head>
<script src = "deleteCSS.js"></script>
<body onload="noCSS()">
<p> test !!</p>
</body>
</html>

Below is my JavaScript code (deleteCSS.js):

function noCSS(){ 
//I save tag "link"
var CSSlink = document.getElementsByTagName("link"); 
var CSSatt = CSSlink.getAttribute("rel");

for (var i=0; i < CSSlink.length; i++){  
if (CSSatt[i] == "stylesheet"){
CSSlink[i].remove(); }
}
}

javascript html css

Answer 1

Answer №1

Give this a shot using jQuery:

$("link[rel='stylesheet']").remove();

http://example.com/abc123/

Answer 2

Give this a shot using jQuery:

$("link[rel='stylesheet']").remove();

http://example.com/abc123/

Answer 3

Answer №2

const removeCSS = () => {
    const links = document.getElementsByTagName("link");

    for (let i = links.length - 1; i >= 0; i--) {
        if (links[i].rel === "stylesheet") {
            links[i].parentNode.removeChild(links[i]);
        }
    }
}

Ensure to check the rel attribute of each <link> within the loop;
Consider removing them in reverse order - removing one shifts the rest down in the array;
Alternatively, use while (links.length) and always remove the first item at index 0.

Answer 4

const removeCSS = () => {
    const links = document.getElementsByTagName("link");

    for (let i = links.length - 1; i >= 0; i--) {
        if (links[i].rel === "stylesheet") {
            links[i].parentNode.removeChild(links[i]);
        }
    }
}

Ensure to check the rel attribute of each <link> within the loop;
Consider removing them in reverse order - removing one shifts the rest down in the array;
Alternatively, use while (links.length) and always remove the first item at index 0.

Answer 5

Answer №3

If you're looking for a purely JavaScript solution:

(function() {
  var cssLinks = document.getElementsByTagName('link');
  for(var i=0; i<cssLinks.length; i++) {
    if(cssLinks[i].getAttribute('rel') === 'stylesheet') {
      cssLinks[i].remove();
    }
  }
})();

Save this code in a file called no-css.js and include it at the end of your HTML document.

The reason your code isn't working is because getElementsByTagName returns a NodeList, so calling getAttribute('rel') on it will result in a

TypeError: Object #<NodeList> has no method 'getAttribute'

. You need to iterate through each link node and remove any with the rel attribute set to stylesheet.

Hopefully this explanation clears things up for you!

Answer 6

If you're looking for a purely JavaScript solution:

(function() {
  var cssLinks = document.getElementsByTagName('link');
  for(var i=0; i<cssLinks.length; i++) {
    if(cssLinks[i].getAttribute('rel') === 'stylesheet') {
      cssLinks[i].remove();
    }
  }
})();

Save this code in a file called no-css.js and include it at the end of your HTML document.

The reason your code isn't working is because getElementsByTagName returns a NodeList, so calling getAttribute('rel') on it will result in a

TypeError: Object #<NodeList> has no method 'getAttribute'

. You need to iterate through each link node and remove any with the rel attribute set to stylesheet.

Hopefully this explanation clears things up for you!

Answer 7

Answer №4

Presented below is yet another example of JavaScript in action:

    function disableCSS(){ 

        var styleSheets = document.getElementsByTagName("link"); 

        for (i=0; i < styleSheets.length; i++ )
        { 
            if (styleSheets[i].getAttribute("rel") === "stylesheet")
            {
                styleSheets[i--].remove();
            }
        }
    }

Remember to include the closing quotation marks at the end of the href attributes, such as

href="www.mysite.uk/css/style.css"

Answer 8

Presented below is yet another example of JavaScript in action:

    function disableCSS(){ 

        var styleSheets = document.getElementsByTagName("link"); 

        for (i=0; i < styleSheets.length; i++ )
        { 
            if (styleSheets[i].getAttribute("rel") === "stylesheet")
            {
                styleSheets[i--].remove();
            }
        }
    }

Remember to include the closing quotation marks at the end of the href attributes, such as

href="www.mysite.uk/css/style.css"

remove CSS attribute from the JavaScript DOM properties

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Items added to a form using jQuery will not be submitted when the form is posted

Unable to access placeholder information from the controller

Exploring the world of Node.js, JSON, SQL, and database tables

Achieve a full page layout with content and attach the footer to the bottom using flexbox in Tailwindcss and Nextjs

Conceal Element in React if it is the Final Item

Removing an object from the scene using three.js

Having difficulty sending a value with %45 to a REST API

Coloring the Text on Buttons

Tips for preventing text from changing its padding within a div when reducing the width and height dimensions

Creating a zigzag pattern with a linear gradient in CSS

Can you explain the distinction between using a period in a class selector and not using one?

Chrome fails to load webfont upon page initialization

Which is the superior choice: WebSocket-Node or ws? Additionally, is there a universally accepted interface for nodejs websockets available?

Arranging asynchronous functions using async/await in Node.js/JavaScript

Having issues with the Bootstrap tabs code provided in the documentation not functioning correctly

footer extending beyond the previous div's boundaries

Pressing the submit button will trigger the execution of a .php script, which will then generate a popup on the screen and refresh a specific part of

Numerous routers available for enhancing functionality in an Ember application

The CSS styling of Vuetify TreeView does not support text wrapping

Using SailsJS to populate attributes transmitted through socket.io's publishUpdate event