原生js删除style标签

Question

const style = document.createElement('style')
style.innerText = cssText
document.head.appendChild(style)

上面可以往head中添加style样式

现在是怎么样可以删除这一个style 而且这个style不一定再最后一个

可以在style上加个title 怎么样删除这个特定的style标签

Answer 1

上面你声明了一个常量来保存这个dom元素，如果能取到这个常量，那么可以直接删除

style.remove()

取不到，可以添加一个id，用id快速查找删除

style.id = 'my-style'

document.getElementById('my-style').remove()

只能加一个title，那么就获取所有的style标签，遍历判断title是否相等，是的话删除

document.getElementsByTagName('style').some(item=>{
    if(item.title == 'my-title'){
        item.remove()
        return true;
    }
})

Answer 2

如果你是自己添加的标签，在创建的时候就已经保存了它的DOM，需要的时候直接引用变量删除就好了：

const style = document.createElement('style')
style.innerText = cssText
document.head.appendChild(style)
...
style.remove()

也可以添加标签的时候多加一个属性title，然后在需要的时候搜索到它删除。添加的属性只要是能够被style标签支持的属性就行了：

const style = document.createElement('style')
/* style.title= 'style1' */
style.innerText = cssText
document.head.appendChild(style)
...
document.querySelector('style[title="style1"]').remove()