jQuery: Adding CSS to parent

Question

I work with popup windows and want to make it possible to close them.

This is my code:

$(".close").click(function() {
  $(".window").css("display", "none");
});

* {
  margin: 0;
  padding: 0;
  font-family: Arial;
}

.window {
  width: 300px;
  height: 300px;
  background-color: tomato;
  margin: 10px;
  padding: 10px;
}

.close {
  float: right;
}

.close:hover {
  color: white;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="window">Hi.
  <div class="close">X</div>
</div>
<div class="window">I love you.
  <div class="close">X</div>
</div>
<div class="window">Thanks.
  <div class="close">X</div>
</div>

If you click one X, all windows disappear. But only the clicked window should disappear.

How is it possible to do that? :)

Thank you very much for your help! <3

Note that hide() and show() are simpler to use than css('display... — charlietfl
– charlietfl, Commented Aug 22, 2020 at 21:29

Ihor Vyspiansky · Accepted Answer · 2020-08-22 20:30:05Z

2

Try the following

$(".close").click(function() {
  $(this).parents('.window').css("display", "none");
});

Demo - https://codepen.io/vyspiansky/pen/zYqNxXd

answered Aug 22, 2020 at 20:30

Ihor Vyspiansky

9161 gold badge6 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery: Adding CSS to parent

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related