jQuery remove HTML table column

Answer 1

Try this:

    $("a.delete").click(function(){
        var td=$(this).parent();
        var col=$(td).text();
        col=col.substring(col.length-2)*1;
        var f="td:nth-child("+col+")";
        var tbl=$(td).parent().parent();

        $(tbl).find("tr").each(function(){
            $(this).find(f).hide();
        });

Tested in FF3.5.

there is one concern though getting column number. If number of columns excede 2 digits it will not work. It would be better if you put custom attribute and assign it position of column.

   <a class="delete" href="#" col="2">...</a>

remember with nth-child index starts at 1

Answer 2

This old topic came top in google but gives very poor answers. Wasted long time for making this work but the easy solution would be here for example

http://www.devcurry.com/2009/07/hide-table-column-with-single-line-of.html

  $(document).ready(function() {
        $('#btnHide').click(function() {
            $('td:nth-child(2)').hide();
            // if your table has header(th), use this
            //$('td:nth-child(2),th:nth-child(2)').hide();
        });
    });

Answer 3

I know the topic is old but I think the easiest way is just put: $(".delete").remove();

hugs.

Zanoldor

Answer 4

@Jonathan Sampson's answer, I modified the code to handle table markup containing a <thead> element and provide a nice fade effect:

$(document).ready(function(){
    $("a.delete").live("click", function(){
    /* Better index-calculation from @activa */
    var myIndex = $(this).closest("th").prevAll("th").length;
    $(this).parents("table").find("tr").each(function(){
      $(this).find("td:eq("+myIndex+"), th:eq("+myIndex+")").fadeOut('slow', function() {
        $(this).remove();
        fixTitles();
      });
    });
  });
});
function fixTitles() {
  $("tr:eq(0) td").each(function(a){
    $(this).html("<a href='#' class='delete'>Delete Row</a> COL " + (a+1));
  });
}

Answer 5

This is how I would do it.

Assign each cell in a column with the same class name. Then with jQuery, remove all tags that have that class name.

Answer 6

Try this, i got the exact out put

var colnum = $(e.target).closest("td").length;
$(e.target).closest("table").find("tr").each(function(){ 
$(this).find("td:eq(" + colnum + ")").remove()});