Close Bootstrap Card Container

Question

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>

Answer 1

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.

Answer 2

This isn't a standard feature of bootstrap, so you need to bind a JS click event to the icon.

$('.close-icon').on('click',function() {
  $(this).closest('.card').fadeOut();
})

.close-icon {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="card card-outline-danger text-center">
  <span class="pull-right clickable close-icon" data-effect="fadeOut"><i class="fa fa-times"></i></span>
  <div class="card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

Possible dublicate of How to add close button to bootstrap card?

To use this close feature without any Js click event please use bootstrap modal with the data-dismiss property