CODEWITHSUNDEEP
jquerycss
Karl Neumann
Karl Neumann

Reputation: 103

this selects wrong element with jquery

I have a simple web page with three divs styled as a circle and two squares. When clicking on a div, the display property is set to none, so the circle/square should disappear. When I click on the first square(#square1), the second square(#square2) disappears. Why is this happening? 

<!doctype html>
<html>
<head>
<title>Learning jQuery</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript" src="http://code.jquery.com/jquerylatest.min.js"> 
</script>
<style type="text/css">
    #circle{
        width:100px;
        height:100px;
        border-radius:50px;
        background:red;

    }
    #square1, #square2{
        width:100px;
        height:100px;
        background:green;
        margin-top:10px;

    }
</style>    
</head>

<body>
    <div id="circle"></div>
    <div id="square1"></div>
    <div id="square2"></div>

    <script>
        $("div").click(function(){
        $(this).css("display","none");
        });
    </script>
</body>
</html>

Upvotes: 0

Views: 105

Answers (1)

Jason
Jason

Reputation: 15335

The second square does not disappear, the first on does and the second one fills it's spot because you are setting display: none;

Try changing $(this).css("display","none"); to $(this).css("visibility","hidden");

and change your divs to:

<div id="square1">1</div>
<div id="square2">2</div>

so you can see which is actually being hidden.

Look at https://jsfiddle.net/jreljac/vhxkbnby/2/ I've changed the 2nd square's color (as @Jonathan Lonowski mentioned) to help see the difference better

Upvotes: 3

Related Questions