Question

My javascript runs like this on firebug:

 tr=$(this).parent('tr');
 tr.find('.img-delete').css('display','block');

but I can’t see the change on the browser. Is there anything I can do to make it shown?

Update:

First I didn’t know (or remember) it should show as soon as the change made. I have UI items on a thickbox, I was able to catch events of the items in the window and changed css accordingly. But it didn’t show. So my question goes.

Answer 1

Because, in this instance, you’re responding to an event on an element within a table-cell, may I suggest (as related in the comments to your question):

$(this).closest('tr').find('.img-delete').show();

JS Fiddle demo/proof-of-concept.

I’ve switched from parent() to closest(), as parent() only looks at the immediate parent, rather than working its way up the DOM tree of the element’s ancestor elements. As the parent of the input is not, and cannot, in valid HTML, be, the tr element parent() will return a null, undefined or false (or falsey) value, rather than an element to work upon.

The reason I suggest closest(), as opposed to parents() is that closest() stops at the first element that matches the selector, and therefore returns a single element, whereas parents() continues up the DOM tree of the element’s ancestors and returns, potentially, multiple elements in an array.

As you’re likely to want to act upon only a single element, closest() seems a better match.

References:

• closest().
• find().
• parents().
• show().