Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    60
    Thanks
    65
    Thanked 0 Times in 0 Posts

    jquery hide the tr of a td ?

    Hi

    How do I hide the table row when the button remove is clicked in the table below?
    I can't have ids so I tried the script below but it did not work.
    Please can you help.

    Thanks





    Code:
    <script>
    function removeThisRow(){
    this.parent().parent().hide();
    }
    </script>
    Code:
    <table>
    <tr>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td><span onclick="removeThisRow()">remove</span></td>
    </tr>
    
    <tr>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td><span onclick="removeThisRow()">remove</span></td>
    </tr>
    
    <tr>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td><span onclick="removeThisRow()">remove</span></td>
    </tr>
    
    <tr>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td><span onclick="removeThisRow()">remove</span></td>
    </tr>
    </table>

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Have a look at this good explanation of the use of this. Further, you cannot use jQuery functions with this - you need to use $(this) instead.

    So, better to make it unobtrusive really. With your html, remove the onclick attributes and:

    Code:
    $('span').click(function(){
    	$(this).parents('tr').hide();
    });
    will do the job
    Last edited by SB65; 06-07-2012 at 03:17 PM.

  • Users who have thanked SB65 for this post:

    code-in-time (06-08-2012)

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,885
    Thanks
    56
    Thanked 539 Times in 536 Posts
    you are mixing jQuery with vanilla js, which can be done but you have to be careful. Try this instead:
    Code:
    $("span").click (function (){
    $(this).parent().parent().hide()
    });
    [EDIT: oops, too late. what he said ^ ]
    Last edited by xelawho; 06-07-2012 at 03:20 PM.

  • Users who have thanked xelawho for this post:

    code-in-time (06-08-2012)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •