jQuery delete table column

Question

I have a table and cannot change markup:

<table>
    <thead>
        <tr>
            <th>
                blablabla
            </th>
            <th>
                blablabla
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                efgd
            </td>
            <td>
                efghdh
            </td>
        </tr>
    </tbody>
</table>

Here is my function, which should delete a column. It is called on cell click:

function (menuItem, menu) {
    var colnum = $(this).prevAll("td").length;

    $(this).closest('table').find('thead tr th:eq('+colnum+')').remove();
    $(this).closest("table").find('tbody tr td:eq('+colnum+')').remove();    
    return;
}

But it deletes something else, not the column I wanted to delete. Where am I wrong?

I can't see your intention here, please give more specific. You wanna delete all of it or just specific columns? — Tee Wu
– Tee Wu, Commented Dec 28, 2010 at 6:59

Clément Moulin - SimpleRezo · Accepted Answer · 2020-06-01 21:33:35Z

18

A column is pretty much just cells, so you'll need to manually loop through all the rows and remove the cell by the index.

This should give you a good starting point for removing the 3rd column:

$("tr").each(function() {
    $(this).children("td:eq(2)").remove();
});

edited Jun 1, 2020 at 21:33

Clément Moulin - SimpleRezo

4143 silver badges13 bronze badges

answered Dec 28, 2010 at 7:03

Ariel

4,5102 gold badges24 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mike Over a year ago

This does not quite work. filter() is applied to the tr elements, not the td elements, so this doesn't remove anything. Instead you need to either do $(this).children().filter() or better $(this).find().

Jidehem May 19 at 16:01

$("tr>*:nth-child(2)").remove() seems shorter/simpler and do the job

user113716 · Accepted Answer · 2010-12-28 07:17:35Z

10

This uses .delegate() for the handler, and a more native approach using cellIndex to get the cell index that was clicked, and cells to pull the cell from each row.

Example: http://jsfiddle.net/zZDKg/1/

$('table').delegate('td,th', 'click', function() {
    var index = this.cellIndex;
    $(this).closest('table').find('tr').each(function() {
        this.removeChild(this.cells[ index ]);
    });
});

edited Dec 28, 2010 at 7:17

answered Dec 28, 2010 at 7:03

user113716

323k64 gold badges454 silver badges441 bronze badges

1 Comment

user2399035 Over a year ago

As of jQuery 3.0, .delegate() has been deprecated. It was superseded by the .on() method since jQuery 1.7, so its use was already discouraged. At the time of the answer delegate was the right thing to use

hackernewbie · Accepted Answer · 2013-01-25 12:20:42Z

10

This works fine for me:

$(".tableClassName tbody tr").each(function() {
    $(this).find("td:eq(3)").remove();
});

answered Jan 25, 2013 at 12:20

hackernewbie

1,71223 silver badges13 bronze badges

Comments

Amay Kulkarni · Accepted Answer · 2016-05-17 10:02:25Z

6

If you have the static html (consider table with 10 columns),

then remove the first column along with header using below:

 $('#table th:nth-child(1),#table td:nth-child(1)').remove();

now the new table will have 9 columns , now you can remove any column using the number:

 $('#table th:nth-child(7),#table td:nth-child(7)').remove();

answered May 17, 2016 at 10:02

Amay Kulkarni

84814 silver badges16 bronze badges

Comments

Allan Pereira · Accepted Answer · 2016-07-04 15:30:45Z

1

Remove the first column from each row.

$('.mytable').find("tr td:nth-child(1)").each(function(){
    $(this).remove()
});

edited Jul 4, 2016 at 15:30

Allan Pereira

2,5704 gold badges23 silver badges28 bronze badges

answered Jun 6, 2014 at 13:46

Eleandro

111 bronze badge

Comments

demo · Accepted Answer · 2019-02-10 12:58:25Z

1

By Applying some class on targeted column we can remove it. For example

<tr>
    <td>ID</td>
    <td>Name</td>
    <td><button class="btnRemoveMember">X</button></td>
</tr>

From above example table we can remove 3rd column of table as follow.

$(.btnRemoveMember).closest('td').remove();

edited Feb 10, 2019 at 12:58

demo

6,29519 gold badges84 silver badges162 bronze badges

answered Feb 10, 2019 at 12:19

Zahid

112 bronze badges

Collectives™ on Stack Overflow

jQuery delete table column

6 Answers 6

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related