只有CSS可以删除pseudo元素，所以你需要有一个其他类display:none;在前面.首先在CSS中声明那个类：

.header {
  ...
  &::before {
    ...
    position: absolute;
    height: 0.5rem;
    ...
  }

  &.no-before::before{
    display:none;
  }
}

然后，当您要删除它时：

$('.header').addClass('no-before'); //Remove before
$('.header').removeClass('no-before'); //Re-add before

通常的方法是创建一个更具体的规则来应用于所讨论的元素（或具有相同具体性的 * 稍后 * 的规则），并指定display: none来隐藏这种情况下的伪对象。
例如：在这里，我想在<span class="foo">前面加上一个X，但如果它们在.header中就不行：
第一个

如果您使用JavaScript操作DOM，则可以将一个类名（例如.remove-bar）添加到具有.header的元素中，以便删除伪元素（生成的内容）：

.remove-bar {
    &::before { content: none; }
}

还要确保将其放置在以前的样式之后，或者根据需要使用更具体的选择器。

对于删除特殊元素使用此方法。

<button onclick="myFunction()">Remove</button>
<div id="myList">
  <div>  Coffee            </div>
  <div id="child2" > Tea   </div>
  <div> Milk               </div>
</div>

您JavaScript：

<script>
function myFunction() {
  const list = document.getElementById("myList");
  if (list.hasChildNodes()) {
    list.removeChild(list.children[0]);
  }
}
</script>

您可以将上述函数与以下代码结合使用：

const parent = document.getElementById('myList');
const children = parent.children;
let index = -1;
for (let i = 0; i < children.length; i++) {
  if (children[i].id === 'child3') {
    index = i;
    break;
  }
}
alert(index); // 👉️ 2