如何用JS删除<style>标签

Question

我需要通过 JS 从 html 文件中删除完整的标签及其内容。

我的想法是找到标签并通过检查其内容来找到正确的标签。然后使用

node.parentNode.removeChild(node)

删除该标签及其内容。 但试验失败了。我还尝试了在该网站上找到的许多其他方法。全部失败了。

删除特定

<style>

标签及其内容的正确方法是什么？

以下是代码，您也可以在这里找到它https://codepen.io/puddlejumper26/pen/eYQwvaY

为了进行比较，我还添加了删除

<span>

的方法，效果很好，但对于

<style>

则不起作用。

在codepen中，您需要右键单击，然后选择

view frame source

来检查样式是否被删除。

<style>
  #footer-desktop :root {
    --article-body-tablet-offset: rem(32px);
    --grid-6-1-column-content: calc(1 * ((((100% - (var(--grid-column-gap)*5))/6)) + var(--grid-column-gap)) - var(--grid-column-gap));
    --grid-6-1-column-content-gap: calc(1 * ((((100% - (var(--grid-column-gap)*5))/6)) + var(--grid-column-gap)));
    --grid-8-1-column-content: calc(1 * ((((100% - (var(--grid-column-gap)*7))/8)) + var(--grid-column-gap)) - var(--grid-column-gap));
    --grid-8-1-column-content-gap: calc(1 * ((((100% - (var(--grid-column-gap)*7))/8)) + var(--grid-column-gap)));
    --grid-8-2-column-content: calc(2 * ((((100% - (var(--grid-column-gap)*7))/8)) + var(--grid-column-gap)) - var(--grid-column-gap));
    --grid-8-3-column-content: calc(3 * ((((100% - (var(--grid-column-gap)*7))/8)) + var(--grid-column-gap)) - var(--grid-column-gap));
    --grid-8-4-column-content: calc(4 * ((((100% - (var(--grid-column-gap)*7))/8)) + var(--grid-column-gap)) - var(--grid-column-gap));
    --grid-10-1-column-content: calc(1 * ((((100% - (var(--grid-column-gap)*9))/10)) + var(--grid-column-gap)) - var(--grid-column-gap));
    --grid-10-2-column-content: calc(2 * ((((100% - (var(--grid-column-gap)*9))/10)) + var(--grid-column-gap)) - var(--grid-column-gap));
    --grid-10-3-column-content: calc(3 * ((((100% - (var(--grid-column-gap)*9))/10)) + var(--grid-column-gap)) - var(--grid-column-gap));
    --grid-10-4-column-content: calc(4 * ((((100% - (var(--grid-column-gap)*9))/10)) + var(--grid-column-gap)) - var(--grid-column-gap));
    --grid-10-1-column-content-gap: calc(1 * ((((100% - (var(--grid-column-gap)*9))/10)) + var(--grid-column-gap)));
    --grid-12-1-column-content-gap: calc(1 * ((((100% - (var(--grid-column-gap)*11))/12)) + var(--grid-column-gap)))
  }
</style>

<section class="_g-o">
      <div class="_g _g-lg fo_en">
        <div class="fo_en-c1">
          <span data-dtm-region="footer_ediciones-ep">
            test test
          </span>
        </div>      
    </div>
</section>

 const styleNodes = document.querySelectorAll('style');

    styleNodes.forEach(node => {
      const result = node.textContent.includes(":root")
      if (result) {
        // console.log(1111, node.parentNode.childNodes)
        console.log(22222, node);
        node.textContent.replace(/(<style[\w\W]+style>)/g, " ");
        node.textContent.replace(/<style.*?<\/style>/g, '');
        node.parentNode.removeChild(node);
        node.remove();
        console.log(33333, node.textContent)
      }
    })

const spanNode = document.querySelector('span')
// console.log(spanNode)
// spanNode.parentNode.removeChild(spanNode)

Answer 1

你可以尝试

removeAttribute

。

const styleNodes  = document.querySelectorAll('style');
    
  styleNodes.forEach(node => {
      element.removeAttribute('style');
    });

这将删除整个样式标签。

Answer 2

在 DOM 节点上调用

remove()

就足够了；您不需要触摸父节点或尝试重写节点的文本内容。

const styleNodes = document.querySelectorAll('style');
styleNodes.forEach(node => {
  const result = node.textContent.includes(":root")
  if (result) {
    node.remove();
  }
})

<!-- this style tag will stay -->
<style>
  body {background-color: blue}
</style>

<!-- this one will be removed -->
<style>
 body {background-color: red}
 .foo :root {}
</style>

Text Text Text