I've seemed to stumble upon a problem with a very simple task. I'm trying to hide a parent div when the child is clicked.
Here is my HTML;
<div class="wave-wrap"><div class="wave">click me</div></div>
<div class="wave-wrap"><div class="wave">click me</div></div>
<div class="wave-wrap"><div class="wave">click me</div></div>
Here is my jQuery;
$('.wave').click(function() {
alert($(this).parent().html());
$(this).parent().hide('slow');
});
The alert seems to indicate I have the correct selector, yet the parent div refuses to hide. Any ideas why?
Try $(this).closest(".wave-wrap").hide() instead.
Your code is working very much well. Have a look at the following example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('.wave').click(function() {
alert($(this).parent().html());
$(this).parent().hide('slow');
});
});
</script>
</head>
<body>
<div class="wave-wrap"><div class="wave">click me</div></div>
<div class="wave-wrap"><div class="wave">click me</div></div>
<div class="wave-wrap"><div class="wave">click me</div></div>
</body>
</html>
