title: How to delete a column by Jquery
body: <p>How to delete a column using below code. I'm using jquery and joomla.</p>
  
  <pre><code>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();
                      });
                });
  </code></pre>
  
  <p>HTML structure is mentioned below which is to be manipulated by jquery.</p>
  
  <pre><code>&lt;table id="cardlist" class="admintable"&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;th&gt;Show Time&lt;/th&gt;
              &lt;th colspan="2" style="text-align:left;"&gt;A Full &lt;a href="#ratecardinfo" class="coldelete"&gt;&lt;img src="com/assets/images/remove.png" /&gt;&lt;/a&gt;&lt;/th&gt;
              &lt;th colspan="2" style="text-align:left;"&gt;A Half &lt;a href="#ratecardinfo" class="coldelete"&gt;&lt;img src="com/assets/images/remove.png" /&gt;&lt;/a&gt;&lt;/th&gt;
              &lt;th colspan="2" style="text-align:left;"&gt;B Full &lt;a href="#ratecardinfo" class="coldelete"&gt;&lt;img src="com/assets/images/remove.png" /&gt;&lt;/a&gt;&lt;/th&gt;
              &lt;th colspan="2" style="text-align:left;"&gt;B Half &lt;a href="#ratecardinfo" class="coldelete"&gt;&lt;img src="com/assets/images/remove.png" /&gt;&lt;/a&gt;&lt;/th&gt;
              &lt;th colspan="2" style="text-align:left;"&gt;C Full &lt;a href="#ratecardinfo" class="coldelete"&gt;&lt;img src="com/assets/images/remove.png" /&gt;&lt;/a&gt;&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr id="labelrow"&gt;
              &lt;td&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td width="80px"&gt;&lt;label&gt;COST&lt;/label&gt;&lt;/td&gt;
              &lt;td width="80px"&gt;&lt;label&gt;SALE&lt;/label&gt;&lt;/td&gt;
              &lt;td width="80px"&gt;&lt;label&gt;COST&lt;/label&gt;&lt;/td&gt;
              &lt;td width="80px"&gt;&lt;label&gt;SALE&lt;/label&gt;&lt;/td&gt;
              &lt;td width="80px"&gt;&lt;label&gt;COST&lt;/label&gt;&lt;/td&gt;
              &lt;td width="80px"&gt;&lt;label&gt;SALE&lt;/label&gt;&lt;/td&gt;
              &lt;td width="80px"&gt;&lt;label&gt;COST&lt;/label&gt;&lt;/td&gt;
              &lt;td width="80px"&gt;&lt;label&gt;SALE&lt;/label&gt;&lt;/td&gt;
              &lt;td width="80px"&gt;&lt;label&gt;COST&lt;/label&gt;&lt;/td&gt;
              &lt;td width="80px"&gt;&lt;label&gt;SALE&lt;/label&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="ratedatarow" id="rate15"&gt;
              &lt;td&gt;6:30 PM&lt;/td&gt;
              &lt;input type="hidden" value="15" name="showtimeids[]" /&gt;&lt;input type="hidden" value="101" name="categoryids[]" /&gt;
              &lt;td width="50px"&gt;&lt;input type="text" value="650.00" name="fc:15:101" style="width:45px;" /&gt;&lt;/td&gt;
              &lt;td width="50px"&gt;&lt;input type="text" value="670.00" id="fs_15_101" name="fs:15:101" style="width:45px;" /&gt;&lt;/td&gt;
              &lt;td width="50px"&gt;&lt;input type="text" value="500.00" name="hc:15:101" style="width:45px;" /&gt;&lt;/td&gt;
              &lt;td width="50px"&gt;&lt;input type="text" value="520.00" name="hs:15:101" id="hs_15_101" style="width:45px;" /&gt;&lt;/td&gt;
              &lt;input type="hidden" value="102" name="categoryids[]" /&gt;
              &lt;td width="50px"&gt;&lt;input type="text" value="400.00" name="fc:15:102" style="width:45px;" /&gt;&lt;/td&gt;
              &lt;td width="50px"&gt;&lt;input type="text" value="420.00" id="fs_15_102" name="fs:15:102" style="width:45px;" /&gt;&lt;/td&gt;
              &lt;td width="50px"&gt;&lt;input type="text" value="300.00" name="hc:15:102" style="width:45px;" /&gt;&lt;/td&gt;
              &lt;td width="50px"&gt;&lt;input type="text" value="320.00" name="hs:15:102" id="hs_15_102" style="width:45px;" /&gt;&lt;/td&gt;
              &lt;input type="hidden" value="103" name="categoryids[]" /&gt;
              &lt;td width="50px"&gt;&lt;input type="text" value="1200.00" name="fc:15:103" style="width:45px;" /&gt;&lt;/td&gt;
              &lt;td width="50px"&gt;&lt;input type="text" value="1240.00" name="fs:15:103" id="fs_15_103" style="width:45px;" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;a onclick="removeRow('rate15');" href="#ratecardinfo" id="rem"&gt;&lt;img src="com/assets/images/remove.png" /&gt;&lt;/a&gt; &lt;a id="mo_applytoall" onclick="applyToAll('rate15');" href="#ratecardinfo"&gt; Apply to All &lt;/a&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td style="background-color:#DDDDDD;" colspan="11"&gt;&lt;/td&gt;
              &lt;td style="background-color:#DDDDDD;"&gt;
                  &lt;input type="submit" style="cursor:pointer;" value="Add Card" name="addratecard" /&gt;                    
                  &lt;input type="button" style="cursor:pointer;" onclick="resetAll();" value="Reset" /&gt;                      
                  &lt;input type="button" style="cursor:pointer;" onclick="clearAll();" value="Clear All" /&gt; 
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>When I clicked the remove.png, the particular row should be removed.</p>
  
  <p>Thanks</p>