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

Answer 1

This seems to work..

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

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