Question

I have a table within a checkbox and what I want is, when the checkbox is checked and i press the delete button the table must hide. So I tried this:

$('deleteButton').click(function() 
{
    $('input:checkbox:checked').parents($('table').hide());
});

But it didnt work, I hope someone can help me out with this one?

Thanks in advance!

Answer 1

There are a couple of problems with your code. Firstly, your deleteButton selector would match an element named <deleteButton>, which is obviously not valid. I’m guessing you meant it to be an id selector (#deleteButton) or a class selector (.deleteButton).

Secondly, this line will hide all of the table elements on your page:

$('input:checkbox:checked').parents($('table').hide());

The reason for that is you call $('table').hide(), which will hide all of the table elements, and pass the result of that into the parents method (but do nothing with the result of the parents method). I think what you probably meant was to use table as a selector to the parents method:

$('input:checkbox:checked').parents("table").hide();

However, if the table you want to hide is a descendant of another table further up the DOM, you probably want to use parentsUntil, or you’ll end up hiding the ancestor table too.