JSFiddle - React, Tailwind, and code Playground

by Cath_kb

HTML

<table id="table1">
    <tbody>
        <tr>
            <th><div class="btn">Delete column 1</div></th>
            <th><div class="btn">Delete column 2</div></th>
            <th><div class="btn">Delete column 3</div></th>
            <th><div class="btn">Delete column 4</div></th>
            <th><div class="btn">Delete column 5</div></th>
        </tr>
        <tr>
            <td>07/08/12 11:08 AM 1</td>
            <td>Voicemail Transcription A328413 2</td>
            <td>IN PROGRESS 3</td>
            <td>NA 4</td>
            <td>NA 5</td>
        </tr>
        <tr>
            <td>06/29/12 06:49 PM 1</td>
            <td>Voicemail Transcription A328413 2</td>
            <td>ACCEPTED 3</td>
            <td>98 4</td>
            <td>$0.97 5</td>
        </tr>
        <tr>
            <td>06/27/12 06:48 PM 1</td>
            <td>Voicemail Transcription A328413 2</td>
            <td>ACCEPTED 3</td>
            <td>90 4</td>
            <td>$1.72 5</td>
        </tr>
        <tr>
            <td>06/24/12 10:15 AM 1</td>
            <td>Voicemail Transcription A328413 2</td>
            <td>ACCEPTED 3</td>
            <td>100 4</td>
            <td>$.046 5</td>
        </tr>
        <tr>
            <td>06/21/12 02:32 AM 1</td>
            <td>Voicemail Transcription A328413 2</td>
            <td>ACCEPTED 3</td>
            <td>95 4</td>
            <td>$2.25 5</td>
        </tr>
    </tbody>
</table><!--#table1-->

CSS

table {
    margin: 40px auto;
    table-layout: fixed;
    border: 1px solid green;
    text-align: center;
}
td, th {
    border: 1px solid green;
    padding: 10px;
    width: 200px;
}
.btn {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

JavaScript

$('.btn').on({
    'click': function(){
        var num = $(this).closest('th').index();
        
        jQuery.each($('#table1 tr'), function(i, val) {
            $(val).children(':eq('+num+')').remove();
         });
        
    }
});