jQuery parents("tr") fadeout not working

Question

So I'm trying to create a fadeOut effect of a with class "delete" parent tr element.

Here is my jsfiddle, where you can check it live - http://jsfiddle.net/syTXZ/

and code is here -

HTML -

<table border="1px solid black">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Parent</th>
            <th>Edit</th>
            <th>Delete</th>
        </tr>
    </thead>
    <tbody>
            <tr>
                <td>2</td>
                <td>test222</td>
                <td>test2</td>
                <td><a href="#" categoryID="1" class="edit">Edit Category</a></td>
                <td><a href="#" categoryID="1" class="delete">Delete Category</a></td>
            </tr>                                                    
            <tr>
                <td>1</td>
                <td>te1t22</td>
                <td>tes1t</td>
                <td><a href="#" categoryID="1" class="edit">Edit Category</a></td>
                <td><a href="#" categoryID="1" class="delete">Delete Category</a></td>
            </tr>  
            <tr>
                <td>3</td>
                <td>test2</td>
                <td>test</td>
                <td><a href="#" categoryID="1" class="edit">Edit Category</a></td>
                <td><a href="#" categoryID="1" class="delete">Delete Category</a></td>
            </tr>          
    </tbody>
</table>

and js -

$("a.delete").click(function() {
    $(this).parents("tr").fadeOut(300);
}

but it's not working, any clues? I tried also parent() instead of parents(), but it also didn't work.

duplicate: http://stackoverflow.com/questions/944110/jquery-fadeout-not-working-with-table-rows — Kristian, Aug 04 '12 at 07:58
@Kristian That answer is three years old, can you confirm it still hasn't been fixed? — Anthony Grist, Aug 04 '12 at 08:01

score 6 · Accepted Answer · answered Aug 04 '12 at 07:59

6

Updated with fix: jsFiddle

You were missing );

 $("a.delete").click(function() {
     $(this).parents("tr").fadeOut(300);
 }

Should be

 $("a.delete").click(function() {
     $(this).parents("tr").fadeOut(300);
 });

answered Aug 04 '12 at 07:59

Kurt

7,102
2
19
16

1

Lol, somehow missed that, but my AJAX request still was working. Now fadeOut also is working. ehh, I always miss something, thanks! – y2ok Aug 04 '12 at 08:03
No worries :). Tip for next time, open up your browsers JS debugger or error console when playing around in JSFiddle. For me in Safari OSX, `develop`->`show error console` or OSX Chrome, `view`->`developer`->`javascript console`. 99% of the time it will point you straight to your issue :) – Kurt Aug 04 '12 at 08:11
Yup, I had already it opened, but I'm not familiar with latest version of Safari console lol. Just upgraded to OSX Mountain Lion, so It's hard to understand new things :). Thanks again ;) – y2ok Aug 04 '12 at 08:18

score 1 · Answer 2 · answered Aug 04 '12 at 07:58

1

$("body").delegate("a.delete","click",function() {
    $(this).parent().parent().fadeOut(300);
});

answered Aug 04 '12 at 07:58

coolguy

7,866
9
45
71

score 0 · Answer 3 · answered Aug 04 '12 at 08:05

0

Demo

It should be

$("a.delete").click(function() {
     $(this).parents("tr").fadeOut(300);
 });

answered Aug 04 '12 at 08:05

Priyank Patel

6,898
11
58
88

jQuery parents("tr") fadeout not working

3 Answers3