title: clearing table columns when clicking on a href in table
body: <p>I'm trying to delete a column in a table when the user clicks on <code>remove</code> but i can't seem to get the correct <code>eq()</code></p>
  
  <p>here is my HTML</p>
  
  <pre><code>   &lt;table class="car-titles"&gt;
          &lt;thead data-spy="affix" data-offset-top="495"&gt;
              &lt;tr class="car-figures"&gt;
                  &lt;th&gt;&lt;/th&gt;
                  &lt;td class="empty"&gt;
                      &lt;figure&gt;&lt;/figure&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="#" data-toggle="compare-remove"&gt;Remove&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;View&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="space"&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/td&gt;
                  &lt;td class="empty"&gt;
                      &lt;figure&gt;&lt;/figure&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="#"  data-toggle="compare-remove"&gt;Remove&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;View&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="space"&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/td&gt;
                  &lt;td class="empty"&gt;
                      &lt;figure&gt;&lt;/figure&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="#"  data-toggle="compare-remove"&gt;Remove&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;View&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="space"&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/td&gt;
                  &lt;td class="empty last"&gt;
                      &lt;figure&gt;&lt;/figure&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="#" data-toggle="compare-remove" &gt;Remove&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;View&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="space"&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr class="version"&gt;
                  &lt;th&gt;Version&lt;/th&gt;
                  &lt;td class="empty first last"&gt;&lt;/td&gt;
                  &lt;td class="empty"&gt;&lt;/td&gt;
                  &lt;td class="empty"&gt;&lt;/td&gt;
                  &lt;td class="empty last"&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
      &lt;/table&gt;
  
  
      &lt;table class="attributes"&gt;
          &lt;tbody&gt;
  
              &lt;tr&gt;
                  &lt;th class="heading" colspan="5"&gt;Key Facts&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr rel="rating"&gt;
                  &lt;th&gt;Our rating&lt;/th&gt;
                  &lt;td class="empty first last"&gt;&lt;/td&gt;
                  &lt;td class="empty"&gt;&lt;/td&gt;
                  &lt;td class="empty"&gt;&lt;/td&gt;
                  &lt;td class="empty last"&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr rel="price"&gt;
                  &lt;th&gt;Price&lt;/th&gt;
                  &lt;td class="empty first last"&gt;&lt;/td&gt;
                  &lt;td class="empty"&gt;&lt;/td&gt;
                  &lt;td class="empty"&gt;&lt;/td&gt;
                  &lt;td class="empty last"&gt;&lt;/td&gt;
              &lt;/tr&gt;
           &lt;/tbody&gt;
        &lt;/table&gt;
  </code></pre>
  
  <p>Here is my JQuery</p>
  
  <pre><code> $(function() {
          // Listen for clicks on table originating from [data-toggle="compare-remove"] element(s)
      $("table").on("click", '[data-toggle="compare-remove"]', function ( event ) {
           var e = $(this).parent().index();
           var f = $(".comparison");
           var g = f.find(".version");
           g.children("td").eq(e).addClass("empty").empty();
           var i = e + 2;
              $("table.attributes tr[rel] td:nth-child(" + i + ")").addClass("empty").text("");
          });
      });
  </code></pre>
  
  <p>here is the <a href="http://jsfiddle.net/ka4LY/" rel="nofollow">jsfiddle</a> </p>
  
  <p>NOTE: i want to delete the correct column in both tables</p>