How do I clean the value of the last TD in a table when I click on a link?
<p>I have this HTML piece of code:</p>

<pre><code>&lt;table class="table" id="table_data"&gt;
  &lt;tbody&gt;    
    &lt;tr id="tr_2085"&gt;
      &lt;td&gt;
        &lt;a href="javascript:void(0)" data-id="2085" class="delete"&gt;
          Delete
        &lt;/a&gt;
      &lt;/td&gt;
      &lt;td&gt;United States of America&lt;/td&gt;
      &lt;td&gt;US&lt;/td&gt;
      &lt;td&gt;Post Warranty Service&lt;/td&gt;
      &lt;td&gt;14.01&lt;/td&gt;
    &lt;/tr&gt;    
  &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p>And I am trying to clean (empty) the content of the last <code>td</code> when I click in a <code>.delete</code> link. This is what I am doing:</p>

<pre><code>$('#table_data').on('click', '.delete', function(ev) {
  var item_id = $(this).data('id');

var that = $(this);
  that.closest('tr td:last').empty();
});
</code></pre>

<p>But isn't working since the value remains there. I have tried this too:</p>

<pre><code>that.closest('tr td:last').text('');
that.closest('tr td:last').html('');
</code></pre>

<p>But isn't working either. I think the problem is on the selector I am using but I don't know what is the right one, any help? There is a Fiddle setup <a href="https://jsfiddle.net/de2sgxkq/" rel="nofollow noreferrer">here</a> for play with.</p>