CODEWITHSUNDEEP
javascriptjquery
Anna_B
Anna_B

Reputation: 900

jQuery: Adding CSS to parent

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

Upvotes: 1

Views: 47

Answers (1)

Ihor Vyspiansky
Ihor Vyspiansky

Reputation: 916

Try the following

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

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

Upvotes: 2

Related Questions