通过 ::before 伪选择器添加的元素如何移除？

Question

我有以下情况：（样式是在SASS中完成的，不必要的样式被省略。）

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

这会在应用程序菜单栏的顶部创建一个条形区域。在某些情况下，必须删除此区域。我已经阅读了像这样的问题，但没有成功。通过哪种方法最好删除由 ::before 选择器添加的此条形区域?

- Jan Swart

---

你有没有尝试在自己的CSS样式表中针对相同的元素使用!important来覆盖样式？ - dowomenfart

Answer 1

只有CSS能够移除伪元素，因此您需要拥有一个其他的类，该类display:none; 之前声明在CSS中：

仅 CSS 能去除伪元素，因此您需要另外添加一个类，并且在 CSS 中声明该类将 display:none; 应用于前面的伪元素。

.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

- Karl-André Gagnon

Answer 2

通常的方法是创建一个更具体的规则，适用于相关元素（或使用相同特定度的后续规则），并指定display: none来隐藏伪类。

举个例子：这里我想在<span class="foo">前面加上X，但如果它们在.header中，则不需要。

span.foo::before {
  content: 'X ';
}
.header span.foo::before {
  display: none;
}

<div>
  These have the X:
  <span class="foo">span.foo 1</span>
  <span class="foo">span.foo 2</span>
  <span class="foo">span.foo 3</span>
</div>
<div class="header">
  These don't:
  <span class="foo">span.foo 4</span>
  <span class="foo">span.foo 5</span>
  <span class="foo">span.foo 6</span>
</div>

- T.J. Crowder

---

或者具有完全相同特异性的后续规则。 - Blazemonger

@Blazemonger：确实。 - T.J. Crowder

Answer 3

如果您使用JavaScript操纵DOM，可以为具有.header的元素添加类名（例如.remove-bar），以删除伪元素（生成的内容）：

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

同时确保将其置于先前的样式之后，或者如果需要，请使用更具体的选择器。

- Hashem Qolami

Answer 4

要删除特殊元素，请使用此方法。

<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

- m-tech