How to remove the link tag from the head using javascript? - Stack Overflow

admin管理员组

文章数量:1387451

Here i'm trying to remove the link tags from head based on the flag value. based on the flag value i'm removing the link tags from head and creating new tags.

in the below code whats happening is i'm able to remove only the last link tag, but not all the link tags from the head tag. not sure why its happening.

Here is what i have tried.

    let bootstrapTheme = true;
    let head = document.getElementsByTagName('head')[0],  
    stylesheets = ['.4.1/js/bootstrap.bundle.min.js','.4.1/js/bootstrap.min.js']
    var link;
    stylesheets.forEach(function(stylesheet) {
        link = document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = stylesheet;
        head.appendChild(link);
    });

    if(!bootstrapTheme){
        link.parentNode.removeChild(link);
    }

Here i'm trying to remove the link tags from head based on the flag value. based on the flag value i'm removing the link tags from head and creating new tags.

in the below code whats happening is i'm able to remove only the last link tag, but not all the link tags from the head tag. not sure why its happening.

Here is what i have tried.

    let bootstrapTheme = true;
    let head = document.getElementsByTagName('head')[0],  
    stylesheets = ['https://stackpath.bootstrapcdn./bootstrap/4.4.1/js/bootstrap.bundle.min.js','https://stackpath.bootstrapcdn./bootstrap/4.4.1/js/bootstrap.min.js']
    var link;
    stylesheets.forEach(function(stylesheet) {
        link = document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = stylesheet;
        head.appendChild(link);
    });

    if(!bootstrapTheme){
        link.parentNode.removeChild(link);
    }

• javascript

Share Improve this question Follow asked Mar 31, 2020 at 6:27 CeejayCeejay 7,3051919 gold badges6666 silver badges109109 bronze badges 1

• 3 Wouldn't it be simpler to only start the whole thing if bootstrapTheme is true? – CertainPerformance Commented Mar 31, 2020 at 6:29

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Well you could store all the links you create in an array and then iterate over them and remove them:

let bootstrapTheme = true;
let head = document.getElementsByTagName('head')[0],  
stylesheets = ['https://stackpath.bootstrapcdn./bootstrap/4.4.1/js/bootstrap.bundle.min.js','https://stackpath.bootstrapcdn./bootstrap/4.4.1/js/bootstrap.min.js']
var links = [];
stylesheets.forEach(function(stylesheet) {
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = stylesheet;
    head.appendChild(link);
    links.push(link);
});

if(!bootstrapTheme){
    links.forEach(function(link) {
        link.parentNode.removeChild(link);
    });
}

But if I were you, I would simply wrap the first .forEach() in the if and wouldn't add the links if not necessary:

let bootstrapTheme = true;
let head = document.getElementsByTagName('head')[0],  
stylesheets = ['https://stackpath.bootstrapcdn./bootstrap/4.4.1/js/bootstrap.bundle.min.js','https://stackpath.bootstrapcdn./bootstrap/4.4.1/js/bootstrap.min.js']

if (bootstrapTheme) {
    stylesheets.forEach(function(stylesheet) {
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = stylesheet;
        head.appendChild(link);
    });
}

I would do this the following way.

Step 1: List all link tags in an Array

Step 2: Remove all elements listed in the Array

---

var list = document.head.getElementsByTagName("link");

var num= list.length;

for ( var i =0; i<num; i = i++){

head.removeChild(list[i]);

}

---

I guess, this solution might be helpful:

// bootstrapTheme boolean:
let bootstrapTheme = true;
// Your links:
link_srcs = ["path/to/booststrap1", "link/to/bootstrap2"]
// Creating link tags:
link_srcs.forEach(src => {
        link = document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = src;
        // NOTE: instead of declaring head variable, use document.head
        document.head.appendChild(link);
    }
);

if (!bootstrapTheme) {
  //Getting the link tags and looping them:
  document.head.querySelectorAll("link").forEach(link => {
   // you can use link.remove() too, but this solution is more supported and polyfilled:
   if (link.src in link_srcs) link.parentNode.removeChild(link);
  })
}

and also there is better and shorter code too:

// bootstrapTheme boolean:
let bootstrapTheme = true;
// Your links:
link_srcs = ["path/to/booststrap1", "link/to/bootstrap2"]
// Creating link tags depending on the condition:
if (!bootstrapTheme) {
link_srcs.forEach(src => {
        link = document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = src;
        // NOTE: instead of declaring head variable, use document.head
        document.head.appendChild(link);
    }
);
}

本文标签： How to remove the link tag from the head using javascriptStack Overflow