jQuery：将 CSS 添加到父级

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

Answer 1

Try the following

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

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