CODEWITHSUNDEEP
javascriptjquery
Nicros
Nicros

Reputation: 5183

How to remove table column based on content?

I have a table like this:

<table>
    <tbody>
        <tr>
            <td width="50">
                <img title="Image1" 
                     src="images/image1.png" onclick="dosomething()">
            </td>
            <td width="50">
                <img title="Image2" src="images/image2.png" 
                     onclick="dosomethingelse()">
            </td>
        </tr>
    </tbody>
</table>

I want to delete the <td> that contains Image1. I know in jQuery I can delete the image itself with

$( "img[title='Image1']" ).remove();

But I want to nuke the containing <td> and its width as well to collapse the table as if that image and its column were never there...

Is there a way to back up to the containing element from $("img[title='Image1']")? Or do I need to loop over the whole table (which could be huge) and search for this?

Upvotes: 0

Views: 78

Answers (6)

bmavity
bmavity

Reputation: 2508

This will remove the column based on the clicked image.

$('table img').click(function() {
  $(this).closest('td').remove();
});

Upvotes: 1

james emanon
james emanon

Reputation: 11807

I would go with

$("img[title='Image1']").closest('td').remove();

or like the others mention:

$("img[title='Image1']").parent().remove();

Upvotes: 2

TweeZz
TweeZz

Reputation: 4909

$( "img[title='Image1']" ).parent().remove();

This should do what you want..

Upvotes: 1

MrCode
MrCode

Reputation: 64526

Using .parent():

$( "img[title='Image1']" ).parent().remove();

From the docs:

.parent( [selector ] )
Get the parent of each element in the current set of matched elements, optionally filtered by a selector.

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324630

.parent() should do it.

$("img[title='Image1']").parent().remove();

Although personally I'd slap an ID on the image and use:

var toremove = document.getElementById('imageid').parentNode;
toremove.parentNode.removeChild(toremove);

Upvotes: 1

Jeremy T
Jeremy T

Reputation: 1293

You could do $("img[title='Image1']").parent().remove();. That would remove the cell containing the image (assuming the image is always the direct descendant of the cell).

Upvotes: 1

Related Questions