如何使用javascript從頭部刪除鏈接標簽？

Question

在這里，我試圖根據標志值從 head 中刪除鏈接標簽。 根據標志值，我從 head 中刪除鏈接標簽並創建新標簽。

在下面的代碼中，發生的事情是我只能刪除最后一個鏈接標簽，但不能刪除 head 標簽中的所有鏈接標簽。 不知道為什么會發生。

這是我嘗試過的。

    let bootstrapTheme = true;
    let head = document.getElementsByTagName('head')[0],  
    stylesheets = ['https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js','https://stackpath.bootstrapcdn.com/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);
    }

Answer 1

好吧，您可以將您創建的所有link存儲在一個數組中，然后遍歷它們並刪除它們：

let bootstrapTheme = true;
let head = document.getElementsByTagName('head')[0],  
stylesheets = ['https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js','https://stackpath.bootstrapcdn.com/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);
    });
}

但如果我是你，我會簡單地將第一個.forEach()包裝在if ，如果沒有必要，我不會添加鏈接：

let bootstrapTheme = true;
let head = document.getElementsByTagName('head')[0],  
stylesheets = ['https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js','https://stackpath.bootstrapcdn.com/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);
    });
}

Answer 2

我想，這個解決方案可能會有所幫助：

// 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);
  })
}

還有更好更短的代碼：

// 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);
    }
);
}

Answer 3

我會通過以下方式做到這一點。

步驟 1：列出數組中的所有鏈接標簽

第 2 步：刪除 Array 中列出的所有元素

---

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

var num= list.length;

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

head.removeChild(list[i]);

}

---