Close Bootstrap Card Container

I have a card container in my code. I have added a 'close' button that I want to close the card when I click it. I am unsure how to make this work and I've been looking at a lot of articles online.

I have the following code:

<div class="card" style="border: 2px black solid">
<div class="card-header container-fluid" id="newsHeading">
    <div class="row">
        <div class="col">
            <h3>News Items</h3>
        </div>
        <div class="col">
        <button type="button" class="close" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        </div>
    </div>
</div>

Is there an html/css method of doing this or will I have to add some JS/JQ logic to make it work?

Any help would be much appreciated! :)

Update:

I added the following code under my html code. It's a quick and simple fix.

<script>
    $('.close').click(function(){
       $('#newsHeading').parent().fadeOut();
    })
</script>

You can use a jquery .click() event with a .hide() or .slideUp() on the id of the header and parent to access that card.

$('.close').click(function(){
  $('#newsHeading').parent().slideUp();
})

There are no parent selectors in css, so using child-nodes to alter the display of parents usually requires something else (JavaScript) to work up through the DOM.