按ID删除HTML元素

Question

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

这就是现在的旗帜：

     <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 标题顶部不和谐及其内容。 通过JS或jquery并不重要。

谢谢！

Answer 1

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

Answer 2

HTML：

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

Pure 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');。

Answer 3

此代码可用于隐藏横幅：

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