Remove HTML Element by ID

Question

i've created a simple banner that sits above my navigation. And i want to give my users the chance to close this banner any time.

That's the banner right now:

     <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>

And i want to have something like a simple button with an X to indicate that this element can be closed.

Thats how it should look like:

So basically i want to delete the ID header-top discord and its content with a simple close button. Via JS or jquery doesn't really matter.

Thank you!

Welcome to Stack Overflow! An important part of the questions here are showing your attempts at resolving them yourself. What have you tried? — zfrisch, Apr 27 '17 at 21:49
Possible duplicate of [Remove all elements of a certain class with JavaScript](https://stackoverflow.com/questions/10842471/remove-all-elements-of-a-certain-class-with-javascript) — leonheess, Oct 21 '19 at 13:54

score 1 · Answer 1 · edited May 23 '17 at 12:10

1

JQuery: $(".header-top discord").remove();

You can call this on a button click

<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);
}

References: MDN - removeChild
Remove all elements of a certain class with JavaScript

edited May 23 '17 at 12:10

Community

1
1

answered Apr 27 '17 at 21:49

Devendra Lattu

2,732
2
18
27

But i still need an on click handler. – Leeooh Apr 27 '17 at 21:51
2

do all the things for me – Kevin B Apr 27 '17 at 21:52
@Leeooh, you may have a look at `JQuery` and `Javascript` implementation. You won't need any event handler for javascript here. – Devendra Lattu Apr 27 '17 at 22:09

score 1 · Answer 2 · answered Apr 27 '17 at 21:55

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";
});

Or jQuery:

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

But I prefer .fadeOut('slow'); for these occasions.

score 0 · Answer 3 · answered Apr 27 '17 at 21:51

0

This code can be used to hide the banner:

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

answered Apr 27 '17 at 21:51

David Nelson

31
4

does this behave like css' `visibility: hidden;`? – Leeooh Apr 27 '17 at 21:53
This will apply the inline style display:none; therefore it will remove any space occupied by the banner. – David Nelson Apr 27 '17 at 21:54

Remove HTML Element by ID

3 Answers3