remove table column by column name using jquery

Question

How to remove table column by column name using jquery ? I have already code, to remove column in table by using index:

$("" + tblNat + " tr").find('td:eq(1),th:eq(1)').remove();`

But now I need to remove table column by column name.

Answer 1

I created a snippet about how to do it.

 function remove(str) { // Get target th with the name you want to remove. var target = $('table').find('th[data-name="' + str +'"]'); // Find its index among other ths var index = (target).index(); // For each tr, remove all th and td that match the index. $('table tr').find('th:eq(' + index + '),td:eq(' + index + ')' ).remove(); } remove('A'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <table> <tr> <th data-name="A">A</th> <th data-name="B">B</th> <th data-name="C">C</th> <th data-name="D">D</th> </tr> <tr> <td>1</td> <td> 2</td> <td> 3</td> <td> 4</td> </tr> <tr> <td>1</td> <td> 2</td> <td> 3</td> <td> 4</td> </tr> </table> 

Answer 2

HTML

<table>
    <tr>
        <td>Col1</td>
        <td>Col2</td>
        <td>Col3</td>
    </tr>
    <tr>
        <td>cell 1</td>
        <td>cell 2</td>
        <td>cell 3</td>
    </tr>
    <tr>
        <td>cell 1</td>
        <td>cell 2</td>
        <td>cell 3</td>
    </tr>
    <tr>
        <td>cell 1</td>
        <td>cell 2</td>
        <td>cell 3</td>
    </tr>
</table>

Javascript

var col_name = "Col2"; //hide all cell in col 2.

$("table tr:eq(0) td").each(function(i){

    //search in each header td the name of col 
    if($(this).text() !== "Col2") return;

    //if match
    $("table tr > td:nth-child("+(i+1)+")").hide();
    return false;
});

working example

http://fiddle.jshell.net/juLcze3j/

Answer 3

Add a data attribute to each cell associated with that column (you can use this method to remove rows too - just add a data-row attribute). This example allows you to click on the column heading and the column will be removed.

HTML

<table>
    <thead>
        <th>one</th>
        <th>two</th>
        <th>three</th>
        <th>four</th>
    </thead>
    <tbody>
        <tr><td data-col="one">1</td><td data-col="two">2</td></tr>
        <tr><td data-col="one">1</td><td data-col="two">2</td></tr>
    </tbody>
</table>

JS

$('th').on('click', function () {
  var id = $(this).html();
  $(this).remove();
  $('[data-col="' + id + '"]').remove();
});

DEMO

Answer 4

The following works based on the index of the clicked item, be it TD or TH . Try clicking on any of the td or th and the corresponding column will be removed.

I have also created a select from the column names and a button to remove the selected column.

Feel free to ask if you wanted something different or adapt the code accordingly.

 //Remove when clicked on any TD or TH var $table = $('table').on("click", "th, td", function() { var $this = $(this); var index = $this.index(); if ( $this[0].tagName === "TD" ) { $table.find("th").eq(index).remove(); } else { $this.remove(); } $table.find("tr").each(function() { $(this).find("td").eq(index).remove(); }); }); //Remove based on button click var $ths = $("th").map(function() { return "<option>" + $.trim($(this).text()) + "</option>" }).get(); var $select = $("select").append($ths.join("")); $(":button").on("click", function() { var $option = $select.find(":selected"); var selected = $option.text(); $option.remove(); if ($select.is(':empty')) { $select.remove(); $(this).remove(); } $table.find("th:contains('" + selected + "')").click(); }); 

 td, th { cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <thead> <th>Name</th> <th>Age</th> <th>City</th> <th>Country</th> </thead> <tbody> <tr><td>Name1</td><td>Age1</td><td>City1</td><td>Country1</td></tr> <tr><td>Name2</td><td>Age1</td><td>City1</td><td>Country1</td></tr> <tr><td>Name3</td><td>Age1</td><td>City1</td><td>Country1</td></tr> <tr><td>Name4</td><td>Age1</td><td>City1</td><td>Country1</td></tr> <tr><td>Name5</td><td>Age1</td><td>City1</td><td>Country1</td></tr> </tbody> </table> <br/><br/> <select></select>&nbsp;<input type="button" value="Remove Selected" /> 

Hope that helps.