Question

I need help. I have HTML code like this,

<div class="close">Close</div>
<table class="table"><tr><td>One</td><td>Two</td></tr></table>

<div class="close">Close</div>
<table class="table"><tr><td>One</td><td>Two</td></tr></table>

<div class="close">Close</div>
<table class="table"><tr><td>One</td><td>Two</td></tr></table>

How can I do on jquery closing only current table, where user clicked on Close.
Thanks .

Answer 1

Assuming your markup is going to stay as it is (with the table immediately following the div):

$(".close").on("click", function () {
    $(this).next().hide();
});

You could make this a bit more efficient by delegating the event handler higher up the DOM tree (bind it to some common ancestor element and pass the .close selector as the 2nd argument to .on()).

References:

• .on()
• .next()
• .hide()