移除元素 | CSS-Tricks

无论出于何种原因，元素都无法在 JavaScript 中自行销毁。jQuery 有一个方法可以实现这一点，这很好，因为这就是我们通常的思路。

$(".remove-me").remove();

但是 JavaScript 中没有直接的等效方法。你需要选择父元素并使用 removeChild。

因此，如果你有

<div class="module">
  <p>Stuff.</p>
  <div class="remove-me">...</div>
</div>

你需要执行

var thingToRemove = document.querySelectorAll(".remove-me")[0];

thingToRemove.parentNode.removeChild(thingToRemove);

或者，如果你有对某个元素的引用，并且想要清空其中的所有元素，但保留该元素本身

mydiv = document.getElementById('empty-me');
while (mydiv.firstChild) {
  mydiv.removeChild(mydiv.firstChild);
}

Andy Hoffman

# 2014 年 7 月 14 日

对于这项任务，使用外观模式怎么样？

function myWrapper(element) {
  this.element = element;
}

myWrapper.prototype.remove = function() {
  this.element.parentNode.removeChild(this.element);
}

var some_el = new myWrapper(
  document.getElementById("some_el)
);

some_el.remove();

Romain Racamier

评论永久链接# 2014 年 7 月 15 日

+1 支持包装器 :)

ffffdessscn

# 2014 年 7 月 15 日

不错，但对大多数 html、css 和 jquery 人来说太难了。

Chris Coyier

# 2014 年 7 月 15 日

不，你会没事的。

把它想象成这样

// jQuery: thingToRemove = $(".remove-me");
var thingToRemove = document.querySelectorAll(".remove-me")[0];

// jQuery: thingToRemove.remove();
thingToRemove.parentNode.removeChild(thingToRemove);

Ren Lyke

# 2015 年 4 月 21 日

嗨，

我正在尝试在一个页面上，当某个特定的类存在于该页面上时，隐藏一个类。否则，这个类应该显示。

当类“gsg-nav”存在时，我希望隐藏这个类“article-sidebar side-column”。

我该怎么做呢？

以下是我的代码链接。

http://codepen.io/anon/pen/MwgNVx

Benjamin

评论永久链接# 2016 年 2 月 24 日

嘿，Ren，你可能在论坛上发布这个问题会更有机会获得解答，因为那里有更多的人可以提供帮助。

祝好运！

ytfdhfg

# 2016 年 3 月 3 日

fghfhfh

trrrrrrrrrr

评论永久链接# 2016 年 3 月 3 日

qwwwwwwwwwwwww

Amit Mishra

# 2017 年 7 月 16 日

大家好，

有人能帮我一下吗？在一个页面中，我有一个 <nav class='test'> 标签，在它下面是一个没有类名或 ID 的 <div> 标签。我想隐藏/移除紧随 <nav> 标签之后的 <div> 元素，我可以使用 $('.test').next().remove();，但是不允许使用 jQuery，请告诉我任何 JavaScript 或 CSS 的技巧。请注意，我无法编辑任何 HTML 代码，只能添加 js/css。

Andy Hoffman

评论永久链接# 2017 年 7 月 19 日

Amit，

我在嵌入代码方面遇到了麻烦，但我整理了一个快速示例，它似乎可以满足你的需求。 demo

Cristian Joan Castellanos Gómez

# 2017 年 9 月 1 日

嗨，我正在尝试根据用户的类型过滤网站内容，我认为这是一个很好的方法。我的问题是，这种方法对网站性能有什么影响？因为如果我使用 display none，该元素仍然存在于 DOM 中，并会影响性能，谢谢！抱歉我的英语水平。

amar

# 2018 年 11 月 9 日

为什么你们在这个地方使用了 [0] querySelector？

评论

发表评论 取消回复

发表评论取消回复