按 ID 移除 HTML 元素答案

【问题标题】：Remove HTML Element by ID按 ID 移除 HTML 元素
【发布时间】：2017-04-27 21:47:18
【问题描述】：

我创建了一个简单的横幅，位于我的导航上方。我想让我的用户有机会随时关闭此横幅。

这就是现在的横幅：

     <div class="header-top discord">
      <div class="container-fluid">
        <div class="discordbanner">
          <p class="pull-left">Join our <img style="width:125px" src="assets\images\random\discord.svg"/> Server today and connect with other...!</p>
          <a href="#" class="btn btn-sm btn-yellow pull-right">Join our Discord!</a>
        </div>
      </div>
    </div>

而且我想要一个带有 X 的简单按钮之类的东西，以指示该元素可以关闭。

它应该是这样的：

所以基本上我想用一个简单的关闭按钮删除 ID header-top discord 及其内容。通过 JS 或 jquery 并不重要。

谢谢！

【问题讨论】：

欢迎来到 Stack Overflow！这里问题的一个重要部分是展示您自己解决问题的尝试。你试过什么？
如果有删除方法就好了。
Remove all elements of a certain class with JavaScript的可能重复

标签： javascript jquery html css

【解决方案1】：

HTML：

<button class="btn">X</button>

纯 JS：

var btn = document.querySelector('button');
var headerClass = document.querySelector('.header-top discord');

btn.addEventListener('click', function() {
   headerClass.style.display="none";
});

或 jQuery：

$('button').on('click', function() {
   $('.header-top discord').hide(); //puts display: none; to styles
});

但在这些场合我更喜欢.fadeOut('slow');。

【讨论】：

【解决方案2】：

jQuery：$(".header-top discord").remove();

您可以在单击按钮时调用它

<script>
$("button").click(function() {
  $(".header-top discord").remove();
});
</script>

Javascript：

var node = document.getElementsByClassName("header-top discord")[0];
if (node.firstChild) {
  node.parentNode.removeChild(node);
}

参考资料： MDN - removeChild
Remove all elements of a certain class with JavaScript

【讨论】：

但我仍然需要一个点击处理程序。
为我做所有的事情
@Leeooh，你可以看看JQuery 和Javascript 的实现。您在这里不需要任何 javascript 事件处理程序。

【解决方案3】：

此代码可用于隐藏横幅：

$('.header-top discord').hide();

【讨论】：

这个行为是否像css'visibility: hidden;？
这将应用内联样式显示：无；因此它将删除横幅占用的所有空间。