Hide 'this' and another element using jquery

Question

Consider my element structure

<a href="#" class="close">X</a>
<div class="container">Lorem ipsum</div>

Now on click of the anchor tag I need to hide both the elements,

$('body').on('click', '.close', function(){
  $(this).hide();
  $('.container').hide();
});

How do I chain both the hide() statements into one?

Answer 1

You can use add() to combine multiple selectors in to a single jQuery object:

$('body').on('click', '.close', function() {
  $(this).add('.container').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<a href="#" class="close">X</a>
<div class="container">Lorem ipsum</div>