1

I am new in Javascript, So I have small problem, First here is my live Code & written here.

this is my index.php file

<ul id="friends">
<li id="Maxi" class="user">Maxi</li>
<li id="John" class="user">John</li>
<li id="Henry" class="user">Henry</li>
<li id="Max"  class="user">Max</li>
<li id="Simon" class="user">Simon</li>
</ul>
<div id="windows"></div>

It is my stylesheet page.

.user{
text-align:center;
width:50px;
height:20px;
display:inline-block;
background-color:#9B59B6;
margin:5px;
border:4px solid #3498DB;
color:#F1C40F;
cursor:pointer;
float:right;
}
.mwindow{
width:150px;
height:200px;
border:2px solid #16a085;
}
.mwindow{
width:140px;
height:25px;
background-color:#1abc9c;
padding:5px;
}
.cls{
display:inline-block;
float:right;
cursor:pointer;
font-size:20px;
font-weight:bold;
}

And it is my js page

    $(document).ready(function(){
$('.user').click(function(){
    var id = $(this).attr("id");
    $html = '<div class="mwindow"><div class="hwindow">'+id+'<span class="cls">x</span></div></div>';
    $('#windows').append($html);

});

});
$(document).ready(function(){
    $('#friends').on('click','.user', function(){
    $('.mwindow').hide();
    });
  });

So my problem is when I click on one of users then display is showing none instead of display block.

Improve this question
4
  • I don't understand expected behaviour. Because if you want to show it, why are you hiding it: $('.mwindow').hide();??? Commented May 17, 2015 at 15:34
  • $('.mwindow').hide(); hides all elements with that class. What do you want to happen instead? Commented May 17, 2015 at 15:34
  • $('.mwindow').hide(); this should work when i click on .mwindow Commented May 17, 2015 at 15:41
  • $('.mwindow').hide(); this should work when i click on .mwindow BUT you are binding it on .user click... Commented May 17, 2015 at 15:43

1 Answer 1

Reset to default
1

This is happening because you have this line $('.mwindow').hide();, which hides the elements that you append to #windows. To hide the element when you press on x you should attach the event on .cls and to hide the parent.

$(document).ready(function(){
    $('#windows').on('click','.cls', function(){
       $(this).parent().parent().hide();
    });
});


$(document).ready(function(){
$('.frnd').click(function(){
    var id = $(this).attr("id");
    $html = '<div class="mwindow"><div class="hwindow">'+id+'<span class="cls">x</span></div></div>';
    $('#windows').append($html);
	
});

});
$(document).ready(function(){
	$('#windows').on('click','.cls', function(){
      $(this).parent().parent().hide();
	});
});
body{
margin:0;
background-color:#999;
height:700px;
}
.frnd{
text-align:center;
width:50px;
height:20px;
display:inline-block;
background-color:#9B59B6;
margin:5px;
border:4px solid #3498DB;
color:#F1C40F;
cursor:pointer;
float:right;
}
.mwindow{
width:150px;
height:200px;
border:2px solid #16a085;
}
.mwindow{
width:140px;
height:25px;
background-color:#1abc9c;
padding:5px;
}
.cls{
display:inline-block;
float:right;
cursor:pointer;
font-size:20px;
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="friends">
    <li id="Maxi" class="frnd">Maxi</li>
    <li id="John" class="frnd">John</li>
    <li id="Henry" class="frnd">Henry</li>
    <li id="Max"  class="frnd">Max</li>
    <li id="Simon" class="frnd">Simon</li>
</ul>
<div id="windows"></div>

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

3 Comments

when i click on x then it mwindow should be hide
why $(this).parent().parent().hide(); ? i didnt understand it.
@Aryan because .cls ($(this)) have the parent .hwindow ($(this).parent()) and this have the parent .mwindow ($(this).parent().parent()), and you want to hide .mwindow that contains the x you clicked.