Question

I have a row of items with a close X float right. I want to have the entire row get hidden (well, removed, so not sure if there is something for that?) when the X is clicked.

However, it doesn’t work for me. It is seemingly simple code, so not sure where I am going wrong. I even took the EXACT code from this question: jQuery – Can't hide parent. And it still doesn’t work.

What am I doing wrong here?

http://jsfiddle.net/2kYrU/9/

HTML:

<div class='row'>
    <div class='close'>
    </div>
</div>

CSS

.row {   
    background:black;        
    width:200px;
    height:30px;
    cursor:pointer;                
}

.close {
    background:red;            
    width:20px;
    height:20px;
    float:right;
}

jQuery:

$(document).ready(function() {

    $('div.close').click(function(){

        $(this).parent.().hide();
    });

});

Any help appreciated. Thanks!

Answer 1

You have a typo:

$(this).parent.().hide();
              ^

Remove that dot and everything works: http://jsfiddle.net/2kYrU/11/