How to delete a column by Jquery

Question

How to delete a column using below code. I'm using jquery and joomla.

jQuery("a.coldelete").live("click", function(){
                    var Index = jQuery(this).closest("th").prevAll("th").length;
                    var CostIndex = Index *2 - 1;
                    var SaleIndex = Index *2; 
                    alert(Index+'-'+CostIndex+'-'+SaleIndex);

                    jQuery("#ratecardlist").find("th:eq("+Index+")").remove();

                    jQuery("#labelrow").find("td:eq("+CostIndex+")").remove();
                    jQuery("#labelrow").find("td:eq("+SaleIndex+")").remove();

                    jQuery("#ratecardlist").find("tr.ratedatarow").each(function(){
                          jQuery(this).find("td:eq("+CostIndex+")").remove();
                          jQuery(this).find("td:eq("+SaleIndex+")").remove();
                    });
              });

HTML structure is mentioned below which is to be manipulated by jquery.

<table id="cardlist" class="admintable">
    <tbody>
        <tr>
            <th>Show Time</th>
            <th colspan="2" style="text-align:left;">A Full <a href="#ratecardinfo" class="coldelete"><img src="com/assets/images/remove.png" /></a></th>
            <th colspan="2" style="text-align:left;">A Half <a href="#ratecardinfo" class="coldelete"><img src="com/assets/images/remove.png" /></a></th>
            <th colspan="2" style="text-align:left;">B Full <a href="#ratecardinfo" class="coldelete"><img src="com/assets/images/remove.png" /></a></th>
            <th colspan="2" style="text-align:left;">B Half <a href="#ratecardinfo" class="coldelete"><img src="com/assets/images/remove.png" /></a></th>
            <th colspan="2" style="text-align:left;">C Full <a href="#ratecardinfo" class="coldelete"><img src="com/assets/images/remove.png" /></a></th>
            <th></th>
        </tr>
        <tr id="labelrow">
            <td>&nbsp;</td>
            <td width="80px"><label>COST</label></td>
            <td width="80px"><label>SALE</label></td>
            <td width="80px"><label>COST</label></td>
            <td width="80px"><label>SALE</label></td>
            <td width="80px"><label>COST</label></td>
            <td width="80px"><label>SALE</label></td>
            <td width="80px"><label>COST</label></td>
            <td width="80px"><label>SALE</label></td>
            <td width="80px"><label>COST</label></td>
            <td width="80px"><label>SALE</label></td>
            <td></td>
        </tr>
        <tr class="ratedatarow" id="rate15">
            <td>6:30 PM</td>
            <input type="hidden" value="15" name="showtimeids[]" /><input type="hidden" value="101" name="categoryids[]" />
            <td width="50px"><input type="text" value="650.00" name="fc:15:101" style="width:45px;" /></td>
            <td width="50px"><input type="text" value="670.00" id="fs_15_101" name="fs:15:101" style="width:45px;" /></td>
            <td width="50px"><input type="text" value="500.00" name="hc:15:101" style="width:45px;" /></td>
            <td width="50px"><input type="text" value="520.00" name="hs:15:101" id="hs_15_101" style="width:45px;" /></td>
            <input type="hidden" value="102" name="categoryids[]" />
            <td width="50px"><input type="text" value="400.00" name="fc:15:102" style="width:45px;" /></td>
            <td width="50px"><input type="text" value="420.00" id="fs_15_102" name="fs:15:102" style="width:45px;" /></td>
            <td width="50px"><input type="text" value="300.00" name="hc:15:102" style="width:45px;" /></td>
            <td width="50px"><input type="text" value="320.00" name="hs:15:102" id="hs_15_102" style="width:45px;" /></td>
            <input type="hidden" value="103" name="categoryids[]" />
            <td width="50px"><input type="text" value="1200.00" name="fc:15:103" style="width:45px;" /></td>
            <td width="50px"><input type="text" value="1240.00" name="fs:15:103" id="fs_15_103" style="width:45px;" /></td>
            <td><a onclick="removeRow('rate15');" href="#ratecardinfo" id="rem"><img src="com/assets/images/remove.png" /></a> <a id="mo_applytoall" onclick="applyToAll('rate15');" href="#ratecardinfo"> Apply to All </a></td>
        </tr>
        <tr>
            <td style="background-color:#DDDDDD;" colspan="11"></td>
            <td style="background-color:#DDDDDD;">
                <input type="submit" style="cursor:pointer;" value="Add Card" name="addratecard" />                    
                <input type="button" style="cursor:pointer;" onclick="resetAll();" value="Reset" />                      
                <input type="button" style="cursor:pointer;" onclick="clearAll();" value="Clear All" /> 
            </td>
        </tr>
    </tbody>
</table>

When I clicked the remove.png, the particular row should be removed.

Thanks

possible duplicate of [jQuery remove HTML table column](http://stackoverflow.com/questions/1068881/jquery-remove-html-table-column) — Mild Fuzz, Sep 11 '12 at 10:07

score 1 · Answer 1 · answered Sep 11 '12 at 09:57

1

the most efficient way would be to give all the cells of a column a class, and then you can use the class name to remove the columns.

$('.myColumn').remove();

Alternatively, you can cycle though the rows, removing each Nth child as required.

$('tr').each(function(){
  $(this).children().eg(N).remove();
})

answered Sep 11 '12 at 09:57

Mild Fuzz

29,463
31
100
148

I'm sorry I'm unable to add classes to the HTML part. That's why I used above JQuery code. – Techie Sep 11 '12 at 10:00
did you change the value N for the number of the column you want to remove? – Mild Fuzz Sep 11 '12 at 10:05
jQuery("tr.ratedatarow").each(function(){ jQuery(this).children().eg(CostIndex).remove(); jQuery(this).children().eg(SaleIndex).remove(); }); – Techie Sep 11 '12 at 10:06
yeah thanks. If you see the code what I have used at the 1st place is the code which you just asked me refer :-( – Techie Sep 11 '12 at 10:08
is the event firing? put an alert at the start to make sure – Mild Fuzz Sep 11 '12 at 10:13
yeah it deletes columns 1 and 3. but what I want to delete is 1 and 2. – Techie Sep 11 '12 at 10:16
http://jsfiddle.net/UbCFp/4/ Seems to work okay, are you trying to delete single cells from one row? – Mild Fuzz Sep 11 '12 at 10:17
it does not delete the rates. what I want to delete is the whole 1st and 2nd coloumn – Techie Sep 11 '12 at 10:19

score 1 · Answer 2 · answered Sep 11 '12 at 10:08

1

in function removeRow try

$(this).closest('tr').remove();

answered Sep 11 '12 at 10:08

gaurang171

9,032
4
28
30

removeROW function works. What I want to do is to remove the columns – Techie Sep 11 '12 at 10:11
which columns do you want to remove ? – gaurang171 Sep 11 '12 at 10:13
depending on the img the user click. if we click the 1st remove.png, column 1 and 2 should be removed – Techie Sep 11 '12 at 10:17
so you want the column and the column to the right of the click to be removed? – Mild Fuzz Sep 11 '12 at 10:30
@MildFuzz according to him th has colspan=2 so if user clicks delete cost and sale both columns should be removed. – gaurang171 Sep 11 '12 at 10:32

score 1 · Accepted Answer · answered Sep 11 '12 at 18:43

1

This seems to work..

$("a").on("click", function(){
    $("table tbody tr").find("td:eq(0)").remove(); 
});

http://jsfiddle.net/peterbenoit/ymYpv/

answered Sep 11 '12 at 18:43

Pete Benoit

28
3

How to delete a column by Jquery

3 Answers3