Javascript 按ID删除HTML元素

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

这就是现在的旗帜：

立即加入我们的服务器并与其他服务器连接

我想要一个简单的按钮，上面有一个X，表示这个元素可以关闭

它应该是这样的：

因此，基本上我想用一个简单的关闭按钮删除ID标题顶部的不一致项及其内容。 通过JS或jquery并不重要

谢谢大家!

JQuery:

$（“.header-top-discord”）.remove（）

你可以通过点击按钮来调用它

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

参考资料：



此代码可用于隐藏横幅：

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

HTML:

或jQuery：

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

但我更喜欢
.fadeOut（'slow'）适用于这些情况。
欢迎使用堆栈溢出！这里的一个重要问题是展示你自己解决这些问题的努力。你试过什么？如果有一个删除方法就好了。可能是的重复，但我仍然需要一个点击处理程序。为我做所有的事情me@Leeooh，您可以看看
JQuery
和
Javascript
实现。这里不需要javascript的任何事件处理程序。它的行为是否像css“
visibility:hidden？这将应用内联样式显示：无；因此，它将删除横幅占用的任何空间。
$('.header-top discord').hide();

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

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

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

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