How to hide all tr from table except clicked one

Question

I want to hide all <tr> of the table except on which I clicked.

<table>
    <tr>
        <td>ABC</td>
        <td>DEF</td>
        <td><i class="delete">delete </i></td>
    </tr>
    <tr>
        <td>ABC</td>
        <td>DEF</td>
        <td><i class="delete">delete </i></td>
    </tr>
</table>

On click of delete button hide all rows except current.

Jquery code:-

$(document).ready(function () {
    $('table tbody tr').siblings().not($(this)).hide();
});

Please suggest me.

Answer 1

Use siblings as follow:

See the comments inline in code:

// Bind click event on `tr` inside `table`
$('table').on('click', 'tr', function () {
    // Show current `tr` and hide others
    $(this).siblings().hide();
});

Demo: http://jsfiddle.net/tusharj/LL0c2efg/

Answer 2

You need to run your code under a click event handler, not when the page loads. Also note that .not(this) is redundant when using siblings() as the originating element would not be included anyway. Try this:

$(document).ready(function() {
    $('table tbody tr').click(function() {
        $(this).siblings().hide();
    });
});

Example fiddle